Webserver/components/layout/Navbar.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function Navbar() {
    const pathname = usePathname();

    const isActive = (path: string) => pathname?.startsWith(path);

    return (
        <nav aria-label="Main navigation" className="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-zinc-50/80 dark:bg-zinc-950/80 border-b border-zinc-200/50 dark:border-zinc-800/50">
            <div className="max-w-4xl mx-auto px-6 h-16 flex items-center justify-between">
                <Link href="/" className="font-bold text-lg tracking-tight hover:opacity-70 transition-opacity">
                    AK
                </Link>

                <div className="flex items-center gap-6 text-sm font-medium text-zinc-600 dark:text-zinc-400">
                    <Link
                        href="/blog"
                        className={`transition-colors ${isActive('/blog') ? 'text-zinc-900 dark:text-zinc-100 font-bold' : 'hover:text-zinc-900 dark:hover:text-zinc-100'}`}
                    >
                        Blog
                    </Link>
                    <Link
                        href="/resume"
                        className={`transition-colors ${isActive('/resume') ? 'text-zinc-900 dark:text-zinc-100 font-bold' : 'hover:text-zinc-900 dark:hover:text-zinc-100'}`}
                    >
                        Resume
                    </Link>
                    <div className="w-px h-4 bg-zinc-200 dark:bg-zinc-800 hidden sm:block"></div>
                    <a href="https://code.akkolli.net/lepton" target="_blank" rel="noopener noreferrer" aria-label="Code repositories" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
                        Code
                    </a>
                    <a href="https://github.com/akkolli" target="_blank" rel="noopener noreferrer" aria-label="GitHub profile" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
                        GitHub
                    </a>
                    <a href="https://x.com/thekolliakshay" target="_blank" rel="noopener noreferrer" aria-label="Twitter profile" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
                        Twitter
                    </a>
                </div>
            </div>
        </nav>
    );
}