"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; interface NavItem { label: string; meta?: string; href?: string; external?: boolean; } interface NavSection { title?: string; items: NavItem[]; } interface ExpandableMenuNavbarProps { brand?: React.ReactNode; brandLabel?: string; sections?: NavSection[]; status?: string; version?: string; shortcut?: string; height?: number | string; className?: string; } const DEFAULT_SECTIONS: NavSection[] = [ { items: [ { label: "Index", meta: "01" }, { label: "Work", meta: "24" }, { label: "Notes", meta: "12" }, { label: "Lab", meta: "08" }, ], }, { title: "Resources", items: [ { label: "Changelog", meta: "v2.4" }, { label: "Library", meta: "126" }, { label: "Tools", meta: "07" }, { label: "Press kit", meta: "↗", external: true }, ], }, { title: "Connect", items: [ { label: "Contact" }, { label: "Newsletter", meta: "monthly" }, { label: "Twitter", meta: "↗", external: true }, { label: "GitHub", meta: "↗", external: true }, ], }, ]; function StackedMark() { return ( ); } const SPRING = { type: "spring", stiffness: 280, damping: 32 } as const; const ITEM_EASE = [0.22, 0.61, 0.36, 1] as const; const COLLAPSED_HEIGHT = 56; const WRAPPER_PADDING = 32; export default function ExpandableMenuNavbar({ brand, brandLabel = "Index", sections = DEFAULT_SECTIONS, status = "Available", version = "v2.4.1", shortcut = "M", height = 560, className, }: ExpandableMenuNavbarProps) { const [open, setOpen] = React.useState(false); const containerRef = React.useRef(null); const scrollRef = React.useRef(null); const [measuredOpenHeight, setMeasuredOpenHeight] = React.useState(0); React.useEffect(() => { const el = containerRef.current; if (!el) return; const measure = () => { setMeasuredOpenHeight(Math.max(0, el.clientHeight - WRAPPER_PADDING)); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); React.useEffect(() => { if (!open) return; const handler = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [open]); React.useEffect(() => { if (open && scrollRef.current) { scrollRef.current.scrollTop = 0; } }, [open]); const fallbackOpenHeight = (typeof height === "number" ? height : 560) - WRAPPER_PADDING; const openHeight = measuredOpenHeight > 0 ? measuredOpenHeight : fallbackOpenHeight; const flatIndex = React.useMemo(() => { const offsets: number[] = []; let acc = 0; for (const s of sections) { offsets.push(acc); acc += s.items.length; } return offsets; }, [sections]); return (

{open && ( setOpen(false)} /> )}

{open && (

{sections.map((section, sIdx) => (

{section.title && ( {section.title} )} {section.items.map((item, iIdx) => { const idx = flatIndex[sIdx] + iIdx; return ( {item.label} {item.meta && {item.meta}} ); })}

))} {status} {version}

)}

); }