81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import { Menu, X } from "lucide-react";
|
|
|
|
import NavLinks from "@/components/navigation/NavLinks";
|
|
import SiteLogo from "@/components/navigation/SiteLogo";
|
|
import GetStartedButton from "@/components/navigation/GetStartedButton";
|
|
|
|
const Navbar = () => {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
const isGetStartedPage = pathname === "/get-started";
|
|
const isHeroOrAboutPage = pathname === "/" || pathname === "/about";
|
|
const isAboutPage = pathname === "/about";
|
|
|
|
return (
|
|
<header
|
|
className={`relative z-50 ${
|
|
isHeroOrAboutPage ? "bg-transparent" : "bg-[var(--color-1)]"
|
|
}`}
|
|
>
|
|
<nav className="flex items-center h-[75px] px-6 md:px-12 relative">
|
|
<div className="flex-shrink-0" onClick={() => setMenuOpen(false)}>
|
|
<SiteLogo />
|
|
</div>
|
|
|
|
<div className="hidden min-[828px]:flex min-[870px]:hidden items-center gap-6 ml-auto">
|
|
<NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
|
|
{!isGetStartedPage && <GetStartedButton />}
|
|
</div>
|
|
|
|
<div
|
|
className={`hidden min-[870px]:flex ${
|
|
isGetStartedPage
|
|
? "absolute left-1/2 transform -translate-x-1/2"
|
|
: "flex-1 justify-center transform -translate-x-[7.5%]"
|
|
}`}
|
|
>
|
|
<NavLinks onLinkClick={() => setMenuOpen(false)} />
|
|
</div>
|
|
|
|
<div className="hidden min-[870px]:flex flex-shrink-0">
|
|
{!isGetStartedPage && <GetStartedButton />}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
className="min-[828px]:hidden absolute right-6 top-1/2 transform -translate-y-1/2 p-2 text-[var(--color-8)]"
|
|
aria-label="Toggle menu"
|
|
>
|
|
{menuOpen ? <X size={26} /> : <Menu size={26} />}
|
|
</button>
|
|
</nav>
|
|
|
|
{menuOpen && (
|
|
<div className="min-[828px]:hidden bg-[var(--color-1)] border-t border-[var(--color-2)]">
|
|
<div className="flex flex-col items-center py-4 space-y-4">
|
|
<NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className="absolute left-0 right-0 h-[3px] mx-auto w-[87.5%]"
|
|
style={{
|
|
background: `${
|
|
isAboutPage
|
|
? "color-mix(in srgb, var(--color-2) 50%, transparent)"
|
|
: "var(--color-2)"
|
|
}`,
|
|
}}
|
|
/>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|