const NAV_GROUPS = [ { label: "Stack", items: [ { label: "Architecture", href: "#architecture" }, { label: "Hardware", href: "#hardware" }, { label: "UTS", href: "#uts" }, ], }, { label: "Dashboard", items: [ { label: "PECAN", href: "#pecan" }, { label: "Timeline", href: "#timeline" }, ], }, { label: "Integrations", items: [ { label: "Bridges", href: "#bridges" }, { label: "Broadcast", href: "#broadcast" }, { label: "Lappy AI", href: "#lappy" }, ], }, { label: "Infrastructure", items: [ { label: "Server", href: "#server" }, { label: "Flight Recorder", href: "#flight" }, ], }, { label: "Team", items: [ { label: "Team", href: "#team" }, ], }, ]; // Flat ordered list for scroll tracking const ALL_SECTIONS = NAV_GROUPS.flatMap(g => g.items); function NavGroup({ group, active, onNavigate }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); const isActive = group.items.some(i => active === i.href.slice(1)); React.useEffect(() => { const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); return (
{open && (
setOpen(false)} style={{ position: "absolute", top: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)", background: "rgba(13,12,17,0.97)", backdropFilter: "blur(20px)", border: "1px solid rgba(168,85,247,0.2)", borderRadius: 10, padding: "6px", zIndex: 200, minWidth: 160, boxShadow: "0 16px 40px rgba(0,0,0,0.5)", }} > {group.items.map(item => { const isItemActive = active === item.href.slice(1); return ( ); })}
)}
); } function Nav() { const [scrolled, setScrolled] = React.useState(false); const [active, setActive] = React.useState("overview"); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => { setScrolled(window.scrollY > 40); const sections = ALL_SECTIONS.map(l => l.href.slice(1)); for (let i = sections.length - 1; i >= 0; i--) { const el = document.getElementById(sections[i]); if (el && window.scrollY >= el.offsetTop - 120) { setActive(sections[i]); return; } } setActive("overview"); }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const scrollTo = (href) => { const id = href.slice(1); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: "smooth" }); setMenuOpen(false); }; return ( ); } Object.assign(window, { Nav });