# Sidebar

> Collapsible app navigation shell with mobile Sheet.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/sidebar.json`

## Install

```tsx
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@aspyn-io/kit";
```

### Sidebar

A full navigation shell: composable groups, menus, and active states, backed by SidebarProvider (keyboard toggle ⌘/Ctrl+B, cookie-persisted state, mobile Sheet).

```tsx
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>…</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            {nav.map((item) => (
              <SidebarMenuItem key={item}>
                <SidebarMenuButton isActive={item === active}>
                  {item}
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>…</SidebarFooter>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {/* page content */}
  </SidebarInset>
</SidebarProvider>
```

### Sub-menus, badges & actions

Nest SidebarMenuSub for sub-items, SidebarMenuBadge for counts, and SidebarMenuAction for a hover action on a row.

```tsx
<SidebarMenuItem>
  <SidebarMenuButton>Projects</SidebarMenuButton>
  <SidebarMenuAction aria-label="Add project"><PlusIcon /></SidebarMenuAction>
  <SidebarMenuSub>
    <SidebarMenuSubItem>
      <SidebarMenuSubButton>Website</SidebarMenuSubButton>
    </SidebarMenuSubItem>
  </SidebarMenuSub>
</SidebarMenuItem>

<SidebarMenuItem>
  <SidebarMenuButton isActive>Inbox</SidebarMenuButton>
  <SidebarMenuBadge>12</SidebarMenuBadge>
</SidebarMenuItem>
```

## Notes

- Wrap your app in SidebarProvider and put page content in SidebarInset. Sidebar supports side (left/right), variant (sidebar/floating/inset), and collapsible (offcanvas/icon/none).
- SidebarTrigger toggles it; ⌘/Ctrl+B is wired by default and the open state persists via cookie. On mobile it becomes a Sheet automatically.
- Colors come from a dedicated --as-sidebar-* token set (bg-sidebar, sidebar-accent, sidebar-border…), so the chrome themes independently of the main surface.