61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
|
|
export function Navbar() {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (path: string) => pathname?.startsWith(path);
|
|
|
|
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>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|