# Sidebar

The account navigation: a collapsible rail on desktop and a drawer on mobile, with grouped items and a footer.

Source page: https://sproutboat.com/ikada/components/sidebar

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/sidebar.json
```
Or from the package: `import { Sidebar, SidebarHeader, SidebarFooter, SidebarNav, SidebarItem, SidebarToggle, SidebarTrigger } from "@sproutboat/ikada";`
## Usage
```tsx
import { Sidebar, SidebarHeader, SidebarFooter, SidebarNav, SidebarItem, SidebarToggle, SidebarTrigger } from "@/components/ikada/sidebar";

<Sidebar mode="static">
  <SidebarHeader>Sproutboat</SidebarHeader>
  <SidebarNav label="Account">
    <SidebarItem href="/" icon={<HomeIcon />}>
      Home
    </SidebarItem>
    <SidebarItem href="/sprouts" icon={<FolderIcon />} current trailing={<Badge>4</Badge>}>
      Sprouts
    </SidebarItem>
    <SidebarItem href="/logs" icon={<LogsIcon />}>
      Logs
    </SidebarItem>
  </SidebarNav>
</Sidebar>
```
## Examples
### Column
On desktop a 240px column with a header, a flat nav and an optional footer.
```tsx
<Sidebar mode="static">
  <SidebarHeader>
    <span className="truncate font-semibold">Sproutboat</span>
  </SidebarHeader>
  <SidebarNav label="Account">
    <SidebarItem href="/" icon={<HomeIcon />} current>
      Home
    </SidebarItem>
    <SidebarItem href="/sprouts" icon={<FolderIcon />} trailing={<Badge>4</Badge>}>
      Sprouts
    </SidebarItem>
    <SidebarItem href="/logs" icon={<LogsIcon />}>
      Logs
    </SidebarItem>
  </SidebarNav>
</Sidebar>
```
### Rail
Collapses to a 56px icon rail. Labels stay as accessible names and show in a tooltip.
```tsx
const { collapsed, setCollapsed } = useSidebarState();

<Sidebar mode="static" collapsed={collapsed}>
  <SidebarHeader>
    <span className="truncate font-semibold">Sproutboat</span>
  </SidebarHeader>
  <SidebarNav label="Account">
    <SidebarItem href="/" icon={<HomeIcon />} current>
      Home
    </SidebarItem>
    <SidebarItem href="/sprouts" icon={<FolderIcon />} trailing={<Badge>4</Badge>}>
      Sprouts
    </SidebarItem>
    <SidebarItem href="/logs" icon={<LogsIcon />}>
      Logs
    </SidebarItem>
  </SidebarNav>
  <SidebarFooter>
    <SidebarToggle collapsed={collapsed} onCollapsedChange={setCollapsed} />
  </SidebarFooter>
</Sidebar>
```
### Drawer
On narrow screens it is a modal drawer: it traps focus, closes on Escape and returns focus to the trigger.
```tsx
const { open, setOpen } = useSidebarState();

<SidebarTrigger onClick={() => setOpen(true)} />
<Sidebar mode="drawer" open={open} onOpenChange={setOpen}>
  <SidebarHeader>
    <span className="truncate font-semibold">Sproutboat</span>
  </SidebarHeader>
  <SidebarNav label="Account">
    <SidebarItem href="/" icon={<HomeIcon />} current>
      Home
    </SidebarItem>
    <SidebarItem href="/sprouts" icon={<FolderIcon />}>
      Sprouts
    </SidebarItem>
    <SidebarItem href="/logs" icon={<LogsIcon />}>
      Logs
    </SidebarItem>
  </SidebarNav>
</Sidebar>
```
## Props
### SidebarProps
Also takes every prop of `Omit<ComponentProps<"aside">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| children | `ReactNode` | Sidebar content: a header, nav and footer. |
| mode? | `"auto" \| "static" \| "drawer"` | `static` is always a column, `drawer` is always an overlay, `auto` switches at 768px. Default `auto`. |
| collapsed? | `boolean` | Icon-only rail (desktop only). Controlled. Default `false`. |
| open? | `boolean` | Mobile drawer state. Controlled. Default `false`. |
| onOpenChange? | `((open: boolean) => void)` | Called with the new open state when it opens or closes. |
| drawerLabel? | `string` | Accessible name of the drawer dialog. Default `Navigation`. |
### SidebarItemProps
Also takes every prop of `WithClass<Omit<useRender.ComponentProps<"a">, "children">>`.
| Prop | Type | Description |
| --- | --- | --- |
| href? | `string` | Plain destination. With a router, leave it out and pass `render={<RouterLink to="/x" />}`. |
| icon? | `ReactNode` | Icon before the label. |
| current? | `boolean` | Marks the page you are on: `aria-current="page"` and a raised fill. Default `false`. |
| trailing? | `ReactNode` | Trailing text or a Badge, hidden in the rail. |
| children | `string` | The item's label. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### SidebarNavProps

| Prop | Type | Description |
| --- | --- | --- |
| label? | `string` | Default `Account`. |
### SidebarToggleProps

| Prop | Type | Description |
| --- | --- | --- |
| collapsed | `boolean` |  |
| onCollapsedChange | `(collapsed: boolean) => void` |  |
### SidebarTriggerProps

| Prop | Type | Description |
| --- | --- | --- |
| label? | `string` | Default `Open navigation`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/sidebar.tsx