'use client'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useEffect, useRef, useState } from 'react'; import { ThemeToggle } from './ThemeToggle'; export function Navbar() { const pathname = usePathname(); const [menuOpen, setMenuOpen] = useState(false); const menuRef = useRef(null); const isActive = (path: string) => pathname?.startsWith(path); useEffect(() => { setMenuOpen(false); }, [pathname]); useEffect(() => { if (!menuOpen) return; const handlePointer = (event: MouseEvent) => { if (menuRef.current && !menuRef.current.contains(event.target as Node)) { setMenuOpen(false); } }; const handleKey = (event: KeyboardEvent) => { if (event.key === 'Escape') setMenuOpen(false); }; document.addEventListener('mousedown', handlePointer); document.addEventListener('keydown', handleKey); return () => { document.removeEventListener('mousedown', handlePointer); document.removeEventListener('keydown', handleKey); }; }, [menuOpen]); return ( ); }