46 lines
2.2 KiB
TypeScript
46 lines
2.2 KiB
TypeScript
'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 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" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
|
|
Code
|
|
</a>
|
|
<a href="https://github.com/profLepton" target="_blank" rel="noopener noreferrer" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
|
|
GitHub
|
|
</a>
|
|
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors hidden sm:block">
|
|
Twitter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|