Webserver/components/layout/Navbar.tsx

'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<HTMLDivElement | null>(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 (
        <nav
            aria-label="Main navigation"
            className="fixed left-0 top-0 z-50 w-full border-b border-line bg-paper-overlay"
        >
            <div className="mx-auto flex h-14 max-w-[72rem] items-center justify-between gap-6 px-5 sm:px-6">
                <Link href="/" className="flex items-baseline gap-2.5 transition-opacity hover:opacity-75">
                    <span className="text-[0.96rem] font-medium tracking-[-0.03em] text-ink">
                        Akshay Kolli
                    </span>
                    <span className="hidden font-mono text-[0.65rem] uppercase tracking-[0.14em] text-muted-strong sm:inline">
                        Research
                    </span>
                </Link>

                <div className="flex items-center gap-4 text-[0.68rem] font-mono uppercase tracking-[0.14em] text-muted-strong sm:gap-5">
                    <Link
                        href="/"
                        className={`transition-colors ${pathname === '/' ? 'text-ink' : 'hover:text-ink'}`}
                    >
                        Home
                    </Link>
                    <Link
                        href="/blog"
                        className={`transition-colors ${isActive('/blog') ? 'text-ink' : 'hover:text-ink'}`}
                    >
                        Writing
                    </Link>
                    <Link
                        href="/resume"
                        className={`transition-colors ${isActive('/resume') ? 'text-ink' : 'hover:text-ink'}`}
                    >
                        Resume
                    </Link>
                    <a
                        href="https://github.com/akkolli"
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label="GitHub profile"
                        className="hidden transition-colors hover:text-ink sm:block"
                    >
                        GitHub
                    </a>

                    <div ref={menuRef} className="relative sm:hidden">
                        <button
                            type="button"
                            onClick={() => setMenuOpen((open) => !open)}
                            aria-label="More navigation items"
                            aria-haspopup="menu"
                            aria-expanded={menuOpen}
                            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-muted-strong transition-colors hover:border-line hover:text-ink"
                        >
                            <svg
                                aria-hidden="true"
                                viewBox="0 0 24 24"
                                className="h-4 w-4 fill-none stroke-current"
                                strokeWidth="1.7"
                                strokeLinecap="round"
                            >
                                <path d="M4 7h16" />
                                <path d="M4 12h16" />
                                <path d="M4 17h16" />
                            </svg>
                        </button>
                        {menuOpen && (
                            <div
                                role="menu"
                                className="absolute right-0 top-[calc(100%+0.5rem)] min-w-[9rem] overflow-hidden rounded-md border border-line bg-paper-strong shadow-lg"
                            >
                                <a
                                    href="https://github.com/akkolli"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    role="menuitem"
                                    className="block px-3.5 py-2.5 text-[0.68rem] font-mono uppercase tracking-[0.14em] text-muted-strong transition-colors hover:bg-accent-soft hover:text-ink"
                                >
                                    GitHub
                                </a>
                            </div>
                        )}
                    </div>

                    <ThemeToggle />
                </div>
            </div>
        </nav>
    );
}