Spaces:
Runtime error
Runtime error
| "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> | |
| ); | |
| } | |