Responsive Navigation Bar for Next.js App

I need a navigation bar built for my nextjs app. the current bar syncs with the first section of the landing page. "use client"; import { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { useSession } from "next auth/react"; import { useTheme } from "next themes"; import { usePathname } from "next/navigation"; import ThemeSwitcher from "./ThemeSwitcher"; // Adjust the import path if necessary const Header = () => { const [stickyMenu, setStickyMenu] = useState(false); const [navbarOpen, setNavbarOpen] = useState(false); const { data: session } = useSession(); const pathUrl = usePathname(); const handleStickyMenu = () => { setStickyMenu(window.scrollY > 0); }; useEffect(() => { window.addEventListener("scroll", handleStickyMenu); return () => window.removeEventListener("scroll", handleStickyMenu); }, []); return ( <header className={`fixed left 0 top 0 z 50 w full transition all duration 300 ${ stickyMenu ? "bg white shadow dark:bg dark" : "bg transparent" }`} > <div className="relative mx auto max w [1170px] flex items center justify between px 4 sm:px 8 xl:px 0"> {/* Logo with Animation */} <Link href="/" className="flex items center"> <svg className="w 36 h auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477 89" fill="#026CDF" > {/* Logo SVG content */} <rect width="477" height="89" rx="10" ry="10" fill="#026CDF"></rect> <text x="30" y="55" fontFamily="Arial, sans serif" fontSize="28" fill="#FFFFFF" > Ticket </text> {/* Barcode Decoration */} <rect x="160" y="20" width="80" height="50" fill="#FFFFFF"></rect> <text x="260" y="55" fontFamily="Arial, sans serif" fontSize="28" fill="#FFFFFF" > Reversal </text> </svg> </Link> {/* Navigation Menu */} <div className={`flex items center ${ navbarOpen ? "flex flex col" : "hidden xl:flex" }`} > <nav className="flex space x 4"> {["Features", "How It Works", "Pricing", "FAQ"].map((item, idx) => ( <Link key={idx} href={`#${item.toLowerCase().replace(" ", " ")}`} className={`px 4 py 2 rounded full ${ pathUrl === `#${item.toLowerCase()}` ? "bg primary text white" : "" } hover:bg primary/10`} > {item} </Link> ))} </nav> {/* Theme and Account Controls */} <div className="ml 4 flex items center"> <ThemeSwitcher /> {session?.user ? ( <Link href="/dashboard" className="ml 4 px 4 py 2 rounded full bg primary text white hover:bg primary dark" > Dashboard </Link> ) : ( <> <Link href="/auth/signin" className="ml 4 text black hover:text primary dark:text white" > Sign In </Link> <Link href="/auth/signup" className="ml 4 px 4 py 2 rounded full bg primary text white hover:bg primary dark" > Sign Up </Link> </> )} </div> </div> </div> </header> ); }; export const HeaderWrapper = () => { const pathname = usePathname(); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const timer = setTimeout(() => setIsLoading(false), 2000); return () => clearTimeout(timer); }, []); if (isLoading || pathname.startsWith("/admin") || pathname.startsWith("/user")) { return null; } return <Header />; }; export default Header;