NextJSNetflix/components/Navbar.tsx

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