<!-- source-hash: b66af7d5956b3733b491a303d043d297 -->
A comprehensive sidebar UI component system providing collapsible, responsive navigation panels with mobile drawer support, keyboard shortcuts, and multiple layout variants.

## Key Components

| Component | Description |
|-----------|-------------|
| `SidebarProvider` | Context provider managing open/collapsed state, mobile detection, and cookie persistence |
| `useSidebar` | Hook to access sidebar context (state, toggle, mobile status) |
| `Sidebar` | Core sidebar container supporting `left`/`right` sides, `sidebar`/`floating`/`inset` variants, and `offcanvas`/`icon`/`none` collapsible modes |
| `SidebarTrigger` | Button component that toggles the sidebar (with `PanelLeft` icon) |
| `SidebarRail` | Thin interactive strip for resize/toggle on desktop |
| `SidebarInset` | Main content area companion that adjusts layout based on sidebar state |
| `SidebarInput` | Styled input field scoped to sidebar context |
| `SidebarHeader` | Top section container for branding/navigation |
| `SidebarFooter` | Bottom section container for user/settings actions |
| `SidebarSeparator` | Styled divider using sidebar border token |
| `SidebarContent` | Scrollable middle section for navigation items |

## Usage Example

```typescript
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarTrigger,
  SidebarInset,
  useSidebar,
} from "./sidebar"

export function AppLayout() {
  return (
    <SidebarProvider defaultOpen={true}>
      <Sidebar side="left" variant="sidebar" collapsible="icon">
        <SidebarHeader>
          <span>My App</span>
        </SidebarHeader>
        <SidebarContent>
          {/* Navigation items */}
        </SidebarContent>
        <SidebarFooter>
          {/* User profile */}
        </SidebarFooter>
      </Sidebar>

      <SidebarInset>
        <SidebarTrigger />
        {/* Page content */}
      </SidebarInset>
    </SidebarProvider>
  )
}
```

> **Keyboard shortcut:** `Ctrl+B` / `Cmd+B` toggles the sidebar globally. State is persisted via a 7-day cookie (`sidebar:state`). On mobile, the sidebar renders as a `Sheet` drawer automatically.