49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
|
import MobileMenu from "./MobileMenu"
|
||
|
|
import NavbarItem from "./NavbarItem"
|
||
|
|
import { BsChevronDown,BsSearch,BsBell } from "react-icons/bs"
|
||
|
|
import { useCallback,useState } from "react"
|
||
|
|
import AccountMenu from "./AccountMenu";
|
||
|
|
|
||
|
|
function Navbar() {
|
||
|
|
const [showMobileMenu,setShowMobileMenu] = useState(false);
|
||
|
|
const toggleMobileMenu = useCallback(()=>{
|
||
|
|
setShowMobileMenu((currentvisible) => !currentvisible)
|
||
|
|
},[])
|
||
|
|
return (
|
||
|
|
<nav className="w-full fixed z-40">
|
||
|
|
<div className="px-4 md:px-16 py-6 flex flex-row items-center transition duration-500 bg-zinc-900 bg-opacity-90">
|
||
|
|
<img className="h-10 lg:h-16" src="https://i.imgur.com/6awt6G7.png" alt="Logo" />
|
||
|
|
<div className="flex-row ml-8 gap-7 hidden lg:flex">
|
||
|
|
<NavbarItem label="Home"/>
|
||
|
|
<NavbarItem label="Serie TV"/>
|
||
|
|
<NavbarItem label="Film"/>
|
||
|
|
<NavbarItem label="Nuovi e Popolari"/>
|
||
|
|
<NavbarItem label="La mia Lista"/>
|
||
|
|
<NavbarItem label="Sfoglia per lingua"/>
|
||
|
|
</div>
|
||
|
|
<div onClick={toggleMobileMenu} className="lg:hidden flex flex-row items-center gap-2 ml-8 cursor-pointer relative">
|
||
|
|
<p className="text-white text-sm">Sfoglia</p>
|
||
|
|
<BsChevronDown className="text-white transition" />
|
||
|
|
<MobileMenu visible={showMobileMenu} />
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row ml-auto gap-7 items-center">
|
||
|
|
<div className="text-gray-200 hover:text-gray-300 cursor-pointer transition ">
|
||
|
|
<BsSearch />
|
||
|
|
</div>
|
||
|
|
<div className="text-gray-200 hover:text-gray-300 cursor-pointer transition ">
|
||
|
|
<BsBell />
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row items-center gap-2 cursor-pointer relative">
|
||
|
|
<div className="w-6 h-6 lg:w-10 lg:h-10 rounded-md overflow-hidden">
|
||
|
|
<img src="https://api.dicebear.com/6.x/fun-emoji/svg?seed=Michael" alt="Profilo" />
|
||
|
|
</div>
|
||
|
|
<BsChevronDown className="text-white transition" />
|
||
|
|
</div>
|
||
|
|
<AccountMenu />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Navbar
|