# Side Nav

A navegação lateral de aplicação: colapsa por clique ou por ⌘/Ctrl+B, agrupa, marca a rota ativa e lembra o estado. O rótulo vira sr-only quando fecha, nunca some do DOM.

- Nome no registry: `side-nav`
- Tipo: componente
- Dependências npm: nenhuma
- Demo: https://ui.visantlabs.com/c/side-nav
- Categorias: controles, sidebar, navegacao, app, colapsar, atalho, teclado

## Quando usar

- Use quando: Navegação lateral de app ou dashboard, colapsável por atalho e com a rota ativa marcada
- Evite quando: Menu de site no celular: nav-drawer; poucas ações num botão flutuante, orbit-menu

## Instalar

```bash
npx shadcn@latest add @visant/side-nav
```

## Usar

```tsx
<SideNav />
```

## API

### SideNav

- `brand?: any` — Marca no topo. Slot, porque cada projeto tem o componente de logo dele.
- `brandIcon?: any` — A marca reduzida a símbolo, pro modo compacto. Num trilho de 3,75rem o nome escrito não cabe e vira um corte no meio da palavra; o símbolo cabe. Sem ele, a barra compacta mostra a `brand` como antes.
- `collapsed?: boolean` — Controle externo. Passando isto, a peça para de guardar sozinha.
- `collapsedWidth?: number = 3.75` — Largura colapsada, em rem. Tem que caber um alvo de toque de 44px.
- `defaultCollapsed?: boolean = false` — Estado inicial quando não há nada guardado.
- `footer?: any` — Rodapé colado embaixo: conta, tema, versão.
- `label?: string = "Navegação principal"` — Nome do landmark. Duas navegações na mesma tela precisam de nomes diferentes.
- `onCollapsedChange?: (collapsed: boolean) => void`
- `shortcut?: string | false = "b"` — A tecla do atalho, sempre com `Ctrl`/`⌘`. `false` desliga.
- `storageKey?: string | false = "visant:side-nav"` — Chave do `localStorage`. `false` desliga a persistência.
- `toggle?: boolean = true` — O gatilho de colapso no topo da própria barra.
- `width?: number = 15` — Largura aberta, em rem.

### SideNavGroup

O grupo, e o que acontece com o rótulo dele quando a barra fecha.

- `label?: any` — O nome do grupo. Colapsado, ele vira uma régua — ver a nota.

### SideNavItem

- `active?: boolean = false` — Marca a rota atual. A peça não descobre isso sozinha.
- `asChild?: boolean = false` — Renderiza no filho — `<Link>` do Next, `<NavLink>` do router.
- `icon?: any` — O ícone. Obrigatório na prática: é tudo que sobra quando a barra fecha.
- `meta?: any` — Contagem, atalho, "novo". Some quando a barra fecha — não cabe.