Spaces:
Runtime error
Runtime error
File size: 4,204 Bytes
604d53b 1e77bf3 604d53b 1e77bf3 604d53b 6d64cfb 604d53b 6d64cfb 604d53b 6d64cfb 604d53b 6d64cfb 604d53b 6d64cfb 604d53b 6d64cfb 604d53b 6d64cfb 604d53b 6d64cfb 604d53b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | "use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
const NAV_LINKS = [
{ href: "/", label: "OVERVIEW" },
{ href: "/monitor", label: "MONITOR" },
{ href: "/simulator", label: "SIMULATOR" },
{ href: "/history", label: "HISTORY" },
{ href: "/dataset", label: "DATASET" },
{ href: "/mlops", label: "MLOPS" },
{ href: "/edge", label: "COMPILER" },
];
export default function Navigation() {
const pathname = usePathname();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<nav className="w-full border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
<div className="max-w-350 mx-auto px-4 sm:px-8 py-3 flex items-center justify-between gap-4">
{/* Brand / Logo */}
<div className="flex items-center gap-4">
<Link
href="/"
className="font-sans text-[17px] sm:text-[18px] font-black tracking-[-0.04em] uppercase text-ink hover:text-hazard transition-colors flex items-center gap-2 group"
>
<span className="inline-block w-2.5 h-2.5 bg-hazard" />
<span>HEARTFLOW_OS</span>
</Link>
</div>
{/* Desktop Navigation Links */}
<div className="hidden md:flex items-center gap-1.5 lg:gap-2 text-[11px] lg:text-[12px] font-bold tracking-wider uppercase">
{NAV_LINKS.map((link) => {
const isActive =
pathname === link.href ||
(link.href !== "/" && pathname.startsWith(link.href)) ||
(link.href === "/dataset" && pathname.startsWith("/analytics"));
return (
<Link
key={link.href}
href={link.href}
className={`px-2.5 py-1 transition-all ${
isActive
? "bg-ink text-canvas-cream shadow-[2px_2px_0px_#9F2F2D] font-black"
: "text-ink hover:text-hazard hover:bg-white"
}`}
>
{link.label}
</Link>
);
})}
</div>
{/* Mobile Menu Toggle Button */}
<div className="flex md:hidden items-center gap-2">
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="min-h-11 px-3.5 py-1.5 border-2 border-ink bg-white text-ink text-[11px] font-bold tracking-widest uppercase hover:bg-ink hover:text-white transition-colors flex items-center justify-center"
aria-label="Toggle Navigation Menu"
>
{mobileMenuOpen ? "CLOSE [×]" : "MENU [≡]"}
</button>
</div>
</div>
{/* Mobile Menu Drawer */}
{mobileMenuOpen && (
<div className="md:hidden border-t-2 border-ink bg-white p-4 flex flex-col gap-2 shadow-[0_4px_0_0_#141413]">
<div className="text-[10px] font-bold tracking-widest text-slate uppercase px-2 pb-1 border-b border-ink/20 flex justify-between">
<span>NAVIGATION</span>
<span className="text-hazard">{NAV_LINKS.length} ROUTES</span>
</div>
{NAV_LINKS.map((link) => {
const isActive =
pathname === link.href ||
(link.href !== "/" && pathname.startsWith(link.href)) ||
(link.href === "/dataset" && pathname.startsWith("/analytics"));
return (
<Link
key={link.href}
href={link.href}
onClick={() => setMobileMenuOpen(false)}
className={`min-h-11 px-3 py-2.5 text-[12px] font-bold tracking-wider uppercase flex justify-between items-center transition-colors border ${
isActive
? "bg-ink text-white font-black border-ink shadow-[2px_2px_0px_#9F2F2D]"
: "text-ink border-transparent hover:bg-canvas-cream hover:text-hazard"
}`}
>
<span>{link.label}</span>
{isActive && <span className="text-hazard text-[10px] font-mono font-bold">● ACTIVE</span>}
</Link>
);
})}
</div>
)}
</nav>
);
}
|