93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Menu, X } from "lucide-react";
|
|
import { useState, useEffect } from "react";
|
|
import { BRAND, NAV_LINKS } from "@/lib/constants";
|
|
import { HeroLogo } from "@/components/ui/HeroLogo";
|
|
|
|
export function Header() {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
function handleScroll() {
|
|
setScrolled(window.scrollY > 20);
|
|
}
|
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 z-50 w-full transition-all duration-500 ${
|
|
scrolled
|
|
? "bg-black/40 shadow-none backdrop-blur-xl"
|
|
: "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 sm:px-8">
|
|
<Link href="/" className="group flex items-center gap-2.5">
|
|
<div className="relative flex h-8 w-8 items-center justify-center">
|
|
<div
|
|
className="absolute inset-0 rounded-full transition-all duration-300 group-hover:scale-125"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(201,169,110,0.5) 0%, rgba(201,169,110,0.15) 50%, transparent 70%)",
|
|
}}
|
|
/>
|
|
<HeroLogo
|
|
size={24}
|
|
className="relative text-black transition-transform duration-300 drop-shadow-[0_0_3px_rgba(201,169,110,0.5)] group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
<span className="font-display text-lg font-bold tracking-tight text-[#c9a96e]">
|
|
{BRAND.shortName}
|
|
</span>
|
|
</Link>
|
|
|
|
<nav className="hidden items-center gap-8 md:flex">
|
|
{NAV_LINKS.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="relative py-1 text-sm font-medium text-neutral-400 transition-all duration-300 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 after:bg-[#c9a96e] after:transition-all after:duration-300 hover:text-white hover:after:w-full"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-2 md:hidden">
|
|
<button
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
aria-label="Меню"
|
|
className="rounded-lg p-2 text-neutral-400 transition-colors hover:text-white"
|
|
>
|
|
{menuOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
<div
|
|
className={`overflow-hidden transition-all duration-300 md:hidden ${
|
|
menuOpen ? "max-h-80 opacity-100" : "max-h-0 opacity-0"
|
|
}`}
|
|
>
|
|
<nav className="border-t border-white/[0.06] bg-black/40 px-6 py-4 backdrop-blur-xl sm:px-8">
|
|
{NAV_LINKS.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setMenuOpen(false)}
|
|
className="block py-3 text-base text-neutral-400 transition-colors hover:text-white"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|