Components
Menu Lateral
O padrão de sidebar das aplicações Hogrid, em três zonas fixas: logo no topo, navegação com scroll independente e bloco de usuário ancorado na base.
Demonstração
Largura fixa de 16rem. Abra o grupo Projetos, alterne itens e clique no bloco de usuário: o menu de conta abre para cima, mantendo o rodapé sempre visível.
Painel
Dashboard
A navegação rola de forma independente; o logo e o bloco de usuário permanecem sempre visíveis nas extremidades.
As três zonas
A sidebar nunca rola inteira. Apenas a navegação central tem scroll; topo e base permanecem fixos.
| Zona | Comportamento | Papel |
|---|---|---|
| Topo (logo) | shrink-0, sem scroll | Identidade e retorno à home |
| Navegação | flex-1, overflow-y-auto | Itens, grupos e submenus colapsáveis |
| Bloco de usuário | shrink-0, fixo na base | Conta, preferências e logout |
Regras
Convenções que mantêm a navegação previsível em todo o produto.
Do
- Manter o bloco de usuário sempre visível na base.
- Abrir o menu de conta para cima (side="top").
- Separar o Sair como item destrutivo, isolado por borda.
- Fixar a largura em w-64 e rolar somente a navegação.
- Marcar o item ativo com bg-sidebar-accent e texto em Volts.
Don't
- Rolar a sidebar inteira junto com a navegação.
- Colocar o logout solto na lista de navegação.
- Abrir o popup de conta para baixo, saindo da tela.
- Deixar mais de um submenu aberto ao mesmo tempo.
- Aplicar Volts em itens inativos como decoração.
Referência
| Elemento | Props principais | Origem |
|---|---|---|
| NavGroup | label, icon, children, defaultOpen | padrão de submenu colapsável |
| UserBlock | name, email, role, initials, onAccount, onLogout | bloco de usuário da base |
| DropdownMenuContent | side="top" para abrir o popup para cima | @/components/ui/dropdown-menu |
| DropdownMenuItem | destructive (logout) | @/components/ui/dropdown-menu |