"use client"; import { useState } from "react"; import { motion, useReducedMotion } from "motion/react"; type GlassSidebarLink = { label: string; badge?: string }; const defaultLinks: GlassSidebarLink[] = [ { label: "Overview", badge: "" }, { label: "Projects", badge: "12" }, { label: "Invoices", badge: "2 due" }, { label: "Settings", badge: "" }, ]; type GlassSidebarNavProps = { className?: string; title?: string; subtitle?: string; links?: GlassSidebarLink[]; defaultActive?: string; onActiveChange?: (label: string) => void; /** Forces the reduced-motion variant. The OS preference is always honored as well. */ reducedMotion?: boolean; }; export function GlassSidebarNav({ className = "", title = "Halden Studio", subtitle = "Design workspace, 8 members", links = defaultLinks, defaultActive, onActiveChange, reducedMotion = false, }: GlassSidebarNavProps) { const prefersReducedMotion = useReducedMotion(); const shouldReduceMotion = reducedMotion || Boolean(prefersReducedMotion); const [active, setActiveLabel] = useState(defaultActive ?? links[0]?.label); function setActive(label: string) { setActiveLabel(label); onActiveChange?.(label); } return (

{title}

{subtitle}

{links.map((link) => ( ))}

); }