# Nav Drawer

O menu mobile feito uma vez direito, em dois desenhos: gaveta lateral ou página inteira brutalista com imagem. Foco preso, Escape, retorno do foco e trava de rolagem vindos do Radix Dialog.

- Nome no registry: `nav-drawer`
- Tipo: componente
- Dependências npm: @radix-ui/react-dialog
- Demo: https://ui.visantlabs.com/c/nav-drawer
- Categorias: controles, menu, mobile, drawer, navegacao, acessibilidade

## Quando usar

- Use quando: Menu mobile de site ou landing, em gaveta lateral ou página inteira com imagem
- Evite quando: Navegação lateral fixa de app no desktop: side-nav; atalhos de ícone, magnify-dock

## Instalar

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

## Usar

```tsx
<NavDrawerContent />
```

## API

### NavDrawerTrigger

- `asChild?: boolean = false`

### NavDrawerClose

- `asChild?: boolean = false`

### NavDrawerContent

- `title: any` — Obrigatório: é o nome do diálogo pro leitor de tela. Fica invisível a menos que `showTitle`. Sem ele o Radix reclama no console — e com razão, porque um diálogo sem nome é um buraco na navegação por voz.
- `asChild?: boolean = false`
- `brand?: any` — Slot da marca no topo do painel — logo, wordmark, monograma.
- `footer?: any` — Rodapé do painel: idioma, telefone, redes. Fica colado embaixo.
- `media?: any` — A imagem da metade esquerda no `variant="full"`. Slot pelo mesmo motivo do `brand`: cada projeto tem o seu componente de imagem otimizada. Some abaixo de `md`, onde não há largura pra dividir a tela. Ignorado no `panel`.
- `showTitle?: boolean = false`
- `side?: "right" | "left" | "top" = "right"` — De onde o painel entra. `right` é o padrão do polegar destro.
- `variant?: "panel" | "full" = "panel"` — O desenho do painel.

### NavDrawerItem

- `active?: boolean = false` — Marca a rota atual. A peça não descobre isso sozinha — ver a nota.
- `asChild?: boolean = false` — Renderiza no filho — `<Link>` do Next, `<NavLink>` do router.
- `meta?: any` — Número/rótulo à direita: contagem, ano, "novo". Nunca decoração.

### NavDrawerBurger

O gatilho desenhado: três traços que viram X quando o painel abre.

- `label?: string = "Menu"`