74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import MobileMenu from "./MobileMenu"
|
|
import NavbarItem from "./NavbarItem"
|
|
import { BsChevronDown,BsSearch,BsBell } from "react-icons/bs"
|
|
import { useCallback,useState,useEffect } from "react"
|
|
import AccountMenu from "./AccountMenu";
|
|
|
|
function Navbar() {
|
|
const [showMobileMenu,setShowMobileMenu] = useState(false);
|
|
const [showAccountMenu,setshowAccountMenu] = useState(false);
|
|
const [showBackground,setShowBackground] = useState(false);
|
|
|
|
const TOP_OFFSET = 66;
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if(window.scrollY >= TOP_OFFSET){
|
|
setShowBackground(true);
|
|
}else{
|
|
setShowBackground(false)
|
|
}
|
|
}
|
|
window.addEventListener('scroll',handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll',handleScroll);
|
|
}
|
|
},[])
|
|
|
|
const toggleMobileMenu = useCallback(()=>{
|
|
setShowMobileMenu((currentvisible) => !currentvisible)
|
|
},[]);
|
|
|
|
const toggleAccountMenu = useCallback(()=>{
|
|
setshowAccountMenu((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 ${showBackground ? '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 ${showMobileMenu ? 'rotate-180' : 'rotate-0'}`} />
|
|
<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 onClick={toggleAccountMenu} 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 ${showAccountMenu ? 'rotate-180' : 'rotate-0'}`} />
|
|
</div>
|
|
<AccountMenu visible={showAccountMenu} />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar |