Sidebar
The app side nav, expanded and collapsed, with its menu items and brand picker in every state. Every sidebar uses it, this site included.
- Source
components/SideNav.jsx- Figma
- sidenav (707:12639)
- In code
<SideNav groups collapsed brand footer profile>
States
Expanded (300) and collapsed (54). Both are live: click an item to make it active, use the close button or the logomark to collapse and open. Collapsed items show their name on hover.
Brand picker
v0-brand-picker (707:14150). Tertiary fill and border with the inner shade; on hover both go a step up and the chevron doubles. Collapsed: the logo alone, 28 in a 36 frame.
In the docs
This site's sidebar is the same component: groups from the site map, search in the slot, no brand, community card or profile. Collapse it with the button next to the logo; the choice is remembered. On narrow screens it opens as a drawer, always expanded.
Spec
Source: components/SideNav.jsx and sidenav.css, from Figma 707:12639. Widths 300 / 54 and the 40 item height are layout values from the design.
surface/primary · padding space/16 (collapsed space/8) · gap space/16 · inner shade · lit by light/cursortype/heading/md/medium · close: ghost Button xs, Lucide panel-left, tooltip “Close sidebar”type/body/md/regular · content/tertiaryfill/primary → hover fill/primary-hover + border/primary-hover → active fill/primary-active + border/primary · radius/lg · size/icon/md · type/body/lg/regularfill/tertiary + border/tertiary → hover fill/tertiary-hover + border/tertiary-hover · radius/xl · logo size/control/sm radius/lg · type/body/lg/mediumsurface/primary · border/primary-disabled · radius/xl · padding and gap space/12 · inner highlight · tertiary Button xsborder/primary · padding space/12 · avatar size/control/xs · type/body/md/regular + type/body/sm/regular