Sidebar

SobreCopiar link da âncora

Barra lateral estilo SaaS (KasySidebar) modelada no kit HeroUI: logo + toggle de recolher, lista navegável com pílula ativa, e bloco de perfil fixo embaixo. Colapsa pra um rail de ícones (com tooltips e popup de submenu) em telas estreitas ou pelo toggle.

Três modos, em ordem de prioridade:

• Genérico: passe items (+ sectionLabel, footerItems) pra rodar o rail com uma lista arbitrária de telas (itens folha e/ou grupos expansíveis). Usado pelo console admin.
• Conectado: passe routes / onTapItem / currentItem pras abas reais do app (navegação Bart).
• Showcase: itens de demonstração do HeroUI (padrão, sem os anteriores).

Props principais:

• collapseMode: responsive (padrão, auto-colapsa em telas estreitas) / expanded (sempre largo, usuário recolhe manualmente) / collapsed (começa como rail fino).
• isDrawer: apresenta como gaveta deslizante (sempre larga, sem toggle) — padrão mobile.
• side: left (padrão) ou right — borda da tela onde ancora.
• items (List<KasySidebarItem>): cada item tem icon, label, onTap, selected, e children (List<KasySidebarSubItem>) — quando children não é vazio, o item vira grupo expansível em vez de folha.
• showProfile / profileName / profileEmail / profileAvatar / profileGradient / onProfileTap: bloco de perfil no rodapé.
• notificationsUnread: badge de não lido no item de notificações (modo conectado).
• onSettingsTap / onLogout: callbacks de ações (o componente é só apresentação, o host decide o fluxo real).

Nota: o toggle de colapsar fica disponível em qualquer breakpoint (exceto modo drawer, que é fechado inteiro em vez de recolhido).

PreviewCopiar link da âncora

Atualizado em 03/11/2026