4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T2367,"use client" /** * NavSide — the docs- and product-style side navigation. * * Groups of links, optionally collapsible, with the current page marked. Below * `lg` it collapses into the same Base UI Dialog drawer pattern `NavTop` uses, * because a fixed sidebar on a phone is just lost width. * * a11y: * * - One `

` with an accessible name, and group headings inside it. Four * separate `

` landmarks — one per group — is the more common shape and * the worse one: landmark navigation then lists four items called * "navigation" with nothing to tell them apart. * - Groups are real headings, so heading navigation works down the sidebar. * - Collapsible groups use Base UI's Collapsible, so the trigger is a button * inside the heading with `aria-expanded` and `aria-controls` wired up. * - The current page carries `aria-current="page"`, announced rather than only * coloured. Its ancestor group is expanded on first render, so the active * item is never hidden inside a collapsed section. * - The sidebar scrolls independently and the drawer traps focus. * * Dependencies: @base-ui-components/react, lucide-react, react, * @/lib/types, @/lib/utils, @/components/ui/button, * @/components/ui/heading. */ import { Collapsible } from "@base-ui-components/react/collapsible" import { Dialog } from "@base-ui-components/react/dialog" import { ChevronDownIcon, MenuIcon, XIcon } from "lucide-react" import { useState, type ElementType, type ReactNode } from "react" import type { HeadingLevel, LinkComponent } from "@/lib/types" import { cn, slugId } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" import { Heading } from "@/components/ui/heading" export interface NavSideLink { label: string href: string /** Small trailing tag — "New", "Beta". */ badge?: ReactNode external?: boolean } export interface NavSideGroup { title: string links: NavSideLink[] /** Makes the group a Base UI Collapsible. */ collapsible?: boolean /** Start collapsed. Ignored when the group holds the current page. */ defaultCollapsed?: boolean } export interface NavSideProps { groups: NavSideGroup[] /** Names the landmark, e.g. "Documentation". */ label?: string currentPath?: string link?: LinkComponent /** Heading level of the group headings. Defaults to `2`. */ headingLevel?: HeadingLevel /** Shown above the groups, such as a version switcher or a search button. */ children?: ReactNode /** Top offset of the sticky sidebar, so it clears a fixed header. */ stickyTop?: string className?: string id?: string } const linkClass = "focus-visible:ring-ring flex min-h-9 items-center justify-between gap-2 rounded-md px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none" function NavLinks({ group, currentPath, link, onNavigate, }: { group: NavSideGroup currentPath?: string link?: LinkComponent onNavigate?: () => void }) { const Link = (link ?? "a") as ElementType return (

{item.label} {item.badge} {item.external ? ( (opens in a new tab) ) : null}

) } function NavGroups({ groups, currentPath, link, headingLevel, onNavigate, }: { groups: NavSideGroup[] currentPath?: string link?: LinkComponent headingLevel: HeadingLevel onNavigate?: () => void }) { return (

{groups.map((group) => { const holdsCurrent = group.links.some((item) => item.href === currentPath) const headingId = slugId(group.title, "nav") if (!group.collapsible) { return (

{group.title}

) } return ( {group.title} ) })}

) } export function NavSide({ groups, label = "Section", currentPath, link, headingLevel = 2, children, stickyTop = "5rem", className, id, }: NavSideProps) { const [drawerOpen, setDrawerOpen] = useState(false) return ( <> {label}

{label}

Browse the pages in this section. {children} ) } 4d:["$","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","@base-ui-components/react@1.0.0-rc.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui-components%2Freact","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":"@base-ui-components/react@1.0.0-rc.0"}]]}]}],["$","li","lucide-react@^1.47.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react@^1.47.0"}]]}]}]]}],["$","$L4e",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/button.json","https://facadeui.dev/r/heading.json","https://facadeui.dev/r/types.json","https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/sections/nav-side.tsx","content":"$50","type":"registry:component","target":"components/sections/nav-side.tsx"}],"className":"h-[70svh] min-h-80"}]]}]