# SidebarMenu

Vertical navigation for sidebars and drawers.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/SidebarMenu.tsx)

## Overview

A sidebar menu is vertical navigation of icon and label rows, for sidebars and drawers.

Use links for site navigation, not menu roles. Use `Menu` for actions.

## Examples

### Basic

```tsx
import { SidebarMenu, style } from '@tempoxyz/ds'
import { Key, Settings, Users } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <SidebarMenu.Root aria-label="Console" {...styles.column()}>
      <SidebarMenu.Group>
        <SidebarMenu.GroupLabel>Project</SidebarMenu.GroupLabel>
        <SidebarMenu.Item href="#">
          <Key />
          API Keys
        </SidebarMenu.Item>
      </SidebarMenu.Group>
      <SidebarMenu.Group>
        <SidebarMenu.GroupLabel>Organization</SidebarMenu.GroupLabel>
        <SidebarMenu.Item active href="#">
          <Users />
          Team
        </SidebarMenu.Item>
        <SidebarMenu.Item render={<button type="button" />}>
          <Settings />
          Settings
        </SidebarMenu.Item>
      </SidebarMenu.Group>
    </SidebarMenu.Root>
  )
}

namespace styles {
  export const column = style({ width: '15rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/Basic.tsx)

### Size

Set `size` on `SidebarMenu.Root` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { SidebarMenu, style } from '@tempoxyz/ds'
import { Coins, CreditCard, Home, ShieldCheck, Trend } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <SidebarMenu.Root aria-label={`Wallet ${size}`} key={size} size={size} {...styles.column()}>
          <SidebarMenu.Item active href="#">
            <Home />
            Home
          </SidebarMenu.Item>
          <SidebarMenu.Item href="#">
            <Coins />
            Balances
          </SidebarMenu.Item>
          <SidebarMenu.Item href="#">
            <Trend />
            Activity
          </SidebarMenu.Item>
          <SidebarMenu.Item href="#">
            <CreditCard />
            Credits
          </SidebarMenu.Item>
          <SidebarMenu.Item href="#">
            <ShieldCheck />
            Authorized Apps
          </SidebarMenu.Item>
        </SidebarMenu.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const column = style({ width: '15rem !custom' })

  export const row = style({ display: 'flex', flexWrap: 'wrap', gap: '8' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/Size.tsx)

### Submenu

Nest items in a `SidebarMenu.Submenu`, and set `defaultOpen` to expand it initially.

```tsx
import { SidebarMenu, style } from '@tempoxyz/ds'
import {
  Bank,
  Bell,
  ChartBar,
  Document,
  GasFee,
  Globe,
  Grid,
  Key,
  Link,
  Lock,
  Mail,
  Receipt,
  Users,
  Wallet,
} from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <SidebarMenu.Root aria-label="Dashboard" size="small" {...styles.column()}>
      <SidebarMenu.Item active href="#">
        <Grid />
        Overview
      </SidebarMenu.Item>
      <SidebarMenu.Item href="#">
        <ChartBar />
        Analytics
      </SidebarMenu.Item>
      <SidebarMenu.Submenu defaultOpen>
        <SidebarMenu.SubmenuTrigger>
          <Receipt />
          Transactions
        </SidebarMenu.SubmenuTrigger>
        <SidebarMenu.SubmenuPanel>
          <SidebarMenu.Item href="#">Incoming</SidebarMenu.Item>
          <SidebarMenu.Item href="#">Outgoing</SidebarMenu.Item>
          <SidebarMenu.Item href="#">Refunds</SidebarMenu.Item>
        </SidebarMenu.SubmenuPanel>
      </SidebarMenu.Submenu>
      <SidebarMenu.Group>
        <SidebarMenu.GroupLabel>Payments</SidebarMenu.GroupLabel>
        <SidebarMenu.Item href="#">
          <Wallet />
          Wallets
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <Bank />
          Payouts
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <GasFee />
          Fee payer
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <Link />
          Payment links
        </SidebarMenu.Item>
      </SidebarMenu.Group>
      <SidebarMenu.Group>
        <SidebarMenu.GroupLabel>Developers</SidebarMenu.GroupLabel>
        <SidebarMenu.Item href="#">
          <Key />
          API keys
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <Globe />
          Webhooks
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <Document />
          Docs
        </SidebarMenu.Item>
      </SidebarMenu.Group>
      <SidebarMenu.Group>
        <SidebarMenu.GroupLabel>Settings</SidebarMenu.GroupLabel>
        <SidebarMenu.Item href="#">
          <Users />
          Team
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <Lock />
          Security
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <Bell />
          Notifications
        </SidebarMenu.Item>
        <SidebarMenu.Item href="#">
          <Mail />
          Emails
        </SidebarMenu.Item>
      </SidebarMenu.Group>
    </SidebarMenu.Root>
  )
}

namespace styles {
  export const column = style({ width: '15rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/Submenu.tsx)

## Guidelines

TODO: Write guidelines for SidebarMenu.