'use client'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useEffect, useId, useRef, useState } from 'react'; import { ThemeToggle } from './ThemeToggle'; const navItems = [ { href: '/', label: 'Home' }, { href: '/projects', label: 'Projects' }, { href: '/blog', label: 'Writing' }, { href: '/resume', label: 'Resume' }, ]; export function Navbar() { const pathname = usePathname(); const [menuOpen, setMenuOpen] = useState(false); const menuId = useId(); const menuRef = useRef(null); const isActive = (path: string) => path === '/' ? pathname === '/' : pathname?.startsWith(path); const linkClass = (path: string) => `relative py-1 transition-colors after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:bg-accent after:transition-transform ${isActive(path) ? 'text-ink after:scale-x-100' : 'hover:text-ink after:scale-x-0 hover:after:scale-x-100' }`; 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 ( ); }