Ravox KitNavegação
Barra lateral
A navegação do painel admin, em peças: grupos, itens com ícone e contagem, cabeçalho e rodapé. Recolhe para só os ícones (com dica), lembra a escolha, alterna com Ctrl/⌘ + B e vira gaveta quando a tela é estreita.
Ajustes
Exemplos
Tela estreita: vira gaveta
Recolhida, quebra no celular
Instalação
O shadcn cria components/ui/barra-lateral.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/barra-lateral.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| padraoRecolhida | boolean | false | Recolhida no começo; o valor lembrado vence (BarraLateralProvedor). |
| recolhida / aoRecolher | boolean / (r) => void | — | Modo controlado, ex.: valor lido de um cookie no servidor, sem pulo na primeira pintura (BarraLateralProvedor). |
| chave | string | null | "ravox-barra-lateral" | Chave do localStorage que lembra o estado; null desliga (BarraLateralProvedor). |
| atalho | string | null | "b" | Tecla que, com Ctrl ou ⌘, recolhe e abre; null desliga (BarraLateralProvedor). |
| rotulo | string | "Barra lateral" | Nome do <aside> e da gaveta (BarraLateral). |
| rotulo / recolhivel / padraoAberto | ReactNode / boolean / boolean | — | Título do grupo; recolhível vira botão que abre e fecha (BarraLateralGrupo). |
| icone / contagem / atual | ReactNode / number / boolean | — | Ícone, número à direita (vira ponto quando recolhida) e aria-current="page" (BarraLateralItem). |
| href / asChild / aoClicar | string / boolean / () => void | — | Link, o <Link> do Next como filho, ou botão sem href (BarraLateralItem). |
| useBarraLateral() | { recolhida, alternar, gaveta, … } | — | O estado da barra para os seus componentes (ex.: esconder o nome da marca quando recolhida). |
| BarraLateralGatilho | ComponentProps<"button"> | — | Recolhe e abre no largo; abre a gaveta no estreito. Ponha no cabeçalho da página. |