"use client"; import { type KeyboardEvent, useEffect, useRef, useState } from "react"; import { NAVIGATION_ITEMS } from "@/lib/site-navigation"; import MagneticButton from "./cinematic/MagneticButton"; import { Logo } from "./Logo"; const MENU_ID = "site-navigation-menu"; export function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const menuButtonRef = useRef(null); useEffect(() => { let wasScrolled = false; const updateScrolled = () => { const nextScrolled = window.scrollY > 0; if (nextScrolled === wasScrolled) return; wasScrolled = nextScrolled; setScrolled(nextScrolled); }; updateScrolled(); window.addEventListener("scroll", updateScrolled, { passive: true }); return () => window.removeEventListener("scroll", updateScrolled); }, []); const closeMobileMenu = () => setMobileMenuOpen(false); const handleMenuKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; event.preventDefault(); closeMobileMenu(); menuButtonRef.current?.focus(); }; return (
{mobileMenuOpen ? (
) : null}
); }