79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const navLinks = [
|
|
{ label: "WORK", href: "#work" },
|
|
{ label: "CAPABILITIES", href: "#capabilities" },
|
|
{ label: "FIELD NOTES", href: "/blog/" },
|
|
{ label: "CONTACT", href: "#contact" },
|
|
];
|
|
|
|
function openCommandPalette() {
|
|
window.dispatchEvent(new CustomEvent("blacksite:palette"));
|
|
}
|
|
|
|
export function PortfolioNav() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav
|
|
aria-label="Portfolio navigation"
|
|
className="sticky top-3 z-50 mx-auto mt-3 w-[calc(100%-2rem)] max-w-5xl rounded-xl border border-blacksite-line bg-blacksite-surface/82 px-6 py-2 text-blacksite-muted shadow-[0_18px_70px_rgba(0,0,0,0.38)] backdrop-blur-md sm:px-8 lg:px-12"
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<Link
|
|
href="/"
|
|
aria-current={pathname === "/" ? "page" : undefined}
|
|
className="section-label whitespace-nowrap !text-blacksite-text transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan aria-[current=page]:!text-signal-cyan"
|
|
>
|
|
KRISHNA / SIGNAL
|
|
</Link>
|
|
|
|
<div className="flex min-w-0 flex-1 items-center justify-end gap-1 sm:gap-2">
|
|
<div className="flex min-w-0 items-center gap-1 overflow-x-auto">
|
|
{navLinks.map((link) => {
|
|
const isBlogActive =
|
|
link.href === "/blog/" &&
|
|
(pathname === "/blog" || pathname.startsWith("/blog/"));
|
|
|
|
if (link.href.startsWith("/")) {
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
aria-current={isBlogActive ? "page" : undefined}
|
|
className="section-label rounded-md px-2 py-2 transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan aria-[current=page]:!text-signal-cyan sm:px-3"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="section-label rounded-md px-2 py-2 transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan active:!text-signal-cyan sm:px-3"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={openCommandPalette}
|
|
className="section-label rounded-lg border border-blacksite-line bg-blacksite-surface2 px-3 py-2 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan active:!text-signal-cyan"
|
|
aria-label="Open command palette"
|
|
>
|
|
⌘K
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|