49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const links = [
|
|
{ href: "/", label: "home" },
|
|
{ href: "/homelab/", label: "homelab" },
|
|
{ href: "/archive/", label: "archive" },
|
|
];
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname();
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
|
|
<nav className="max-w-3xl mx-auto px-6 h-11 flex items-center justify-between">
|
|
<Link
|
|
href="/"
|
|
className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"
|
|
>
|
|
tk
|
|
</Link>
|
|
|
|
<ul className="flex gap-6">
|
|
{links.map(({ href, label }) => {
|
|
const active =
|
|
pathname === href || pathname === href.replace(/\/$/, "");
|
|
return (
|
|
<li key={href}>
|
|
<Link
|
|
href={href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={`font-mono text-xs tracking-widest ${
|
|
active
|
|
? "text-[var(--color-text)]"
|
|
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
}`}
|
|
>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|