61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T552d,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type ShellIcon = "home" | "inbox" | "projects" | "calendar" | "reports" | "team" | "settings" | "help" | "docs"; export interface ShellNavItem { id: string; label: string; icon: ShellIcon; badge?: number; } export interface AppShellSidebarProps { workspaces?: { id: string; name: string; plan: string; color: string }[]; nav?: ShellNavItem[]; projects?: { id: string; name: string; color: string }[]; user?: { name: string; email: string; avatar?: string }; /** Page content. A sample page is shown when empty. */ children?: React.ReactNode; defaultCollapsed?: boolean; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", side: "#0E0E0E", main: "#121212", border: "rgba(255,255,255,0.08)", chip: "rgba(255,255,255,0.06)", hover: "rgba(255,255,255,0.045)", active: "rgba(255,255,255,0.08)", skel: "rgba(255,255,255,0.045)", on: "#F5F4F1", onText: "#0A0A0A", accent: "#FB923C", ring: "rgba(245,244,241,0.6)", scrim: "rgba(0,0,0,0.55)", pop: "#181818", shadow: "0 20px 50px -16px rgba(0,0,0,0.8)" }, light: { bg: "#F4F4F1", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", side: "#FAFAF8", main: "#FFFFFF", border: "rgba(10,10,10,0.08)", chip: "rgba(10,10,10,0.05)", hover: "rgba(10,10,10,0.035)", active: "rgba(10,10,10,0.06)", skel: "rgba(10,10,10,0.05)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#EA580C", ring: "rgba(10,10,10,0.5)", scrim: "rgba(10,10,10,0.3)", pop: "#FFFFFF", shadow: "0 20px 50px -20px rgba(0,0,0,0.25)" }, }; const ICONS: Record = { home: "M3 11 12 4l9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9Z", inbox: "M3 13h5l2 3h4l2-3h5M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6l2-8Z", projects: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z", calendar: "M8 3v3m8-3v3M4 9h16M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z", reports: "M4 20V10m6 10V4m6 16v-7m4 7H2", team: "M16 19v-1a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v1M9 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm13 9v-1a4 4 0 0 0-3-3.9M16 4.1a3 3 0 0 1 0 5.8", settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7.4-3a7.4 7.4 0 0 0-.1-1.3l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2.2-1.3L14.4 3h-4l-.4 2.4a7 7 0 0 0-2.2 1.3l-2.4-1-2 3.4 2 1.6a7.4 7.4 0 0 0 0 2.6l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2.2 1.3l.4 2.4h4l.4-2.4a7 7 0 0 0 2.2-1.3l2.4 1 2-3.4-2-1.6c.1-.4.1-.9.1-1.3Z", help: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-2.5-11.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6m0 3.5h.01", docs: "M14 3H6v18h12V7l-4-4Zm0 0v4h4M9 13h6m-6 4h4", }; const DEFAULT_WORKSPACES = [ { id: "w1", name: "Nexora", plan: "Business", color: "#FB923C" }, { id: "w2", name: "Halcyon Studio", plan: "Team", color: "#60A5FA" }, { id: "w3", name: "Side project", plan: "Free", color: "#4ADE80" }, ]; const DEFAULT_NAV: ShellNavItem[] = [ { id: "home", label: "Home", icon: "home" }, { id: "inbox", label: "Inbox", icon: "inbox", badge: 4 }, { id: "projects", label: "Projects", icon: "projects" }, { id: "calendar", label: "Calendar", icon: "calendar" }, { id: "reports", label: "Reports", icon: "reports" }, { id: "team", label: "Team", icon: "team" }, ]; const DEFAULT_PROJECTS = [ { id: "p1", name: "Website v3", color: "#FB923C" }, { id: "p2", name: "Mobile app", color: "#A78BFA" }, { id: "p3", name: "Brand refresh", color: "#4ADE80" }, ]; const DEFAULT_USER = { name: "Mara Okafor", email: "mara@nexora.io", avatar: "/demo/44.webp" }; function glyph(i: ShellIcon, size = 17) { return ( ); } export function AppShellSidebar({ workspaces = DEFAULT_WORKSPACES, nav = DEFAULT_NAV, projects = DEFAULT_PROJECTS, user = DEFAULT_USER, children, defaultCollapsed = false, theme = "dark", className }: AppShellSidebarProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [collapsed, setCollapsed] = React.useState(defaultCollapsed); const [mobileOpen, setMobileOpen] = React.useState(false); const [active, setActive] = React.useState("home"); const [ws, setWs] = React.useState(workspaces[0]?.id); const [menu, setMenu] = React.useState<"ws" | "user" | null>(null); const [projOpen, setProjOpen] = React.useState(true); const shell = React.useRef(null); React.useEffect(() => { if (!menu && !mobileOpen) return; const down = (e: MouseEvent) => { if (!(e.target as HTMLElement).closest("[data-menu]")) setMenu(null); }; const key = (e: KeyboardEvent) => { if (e.key === "Escape") { setMenu(null); setMobileOpen(false); } }; document.addEventListener("mousedown", down); document.addEventListener("keydown", key); return () => { document.removeEventListener("mousedown", down); document.removeEventListener("keydown", key); }; }, [menu, mobileOpen]); const workspace = workspaces.find((w) => w.id === ws) ?? workspaces[0]; const current = [...nav, ...projects.map((x) => ({ ...x, label: x.name }))].find((n) => n.id === active); const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.side } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const mini = collapsed && !mobileOpen; const item = (id: string, label: string, icon: React.ReactNode, badge?: number) => { const on = active === id; return (

); }; const sidebar = (

{/* Workspace switcher */}

{menu === "ws" && (

); return (

{/* Desktop sidebar */} {sidebar} {/* Mobile drawer */} {mobileOpen && ( <> setMobileOpen(false)} /> {sidebar} )} {/* Main */}

Search ⌘K

{children ?? (

{current?.label ?? "Home"}

Your page content goes here.

); } export default AppShellSidebar; 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/app-shell-sidebar/app-shell-sidebar.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]