NextJSNetflix/components/Navbar.tsx

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