Layout
Composição base para qualquer página do app — wrapper `AppShell` com `SidebarNav` (rail/panel) e `TopBarShell` no topo. Cada seção abaixo mostra uma peça isolada.
AppShell
Sidebar colapsável + top nav + conteúdo
Visão Geral
Métricas e atividades das suas propriedades.
import { AppShell } from "@morada-ai/niemeyer/components";
// Bring your own SidebarNav and TopNav — AppShell is a generic layout.
// renderTopNav exposes the mobile-toggle handler so the burger button
// inside TopNav can open the sidebar drawer on small screens.
<AppShell
sidebar={<MySidebarNav />}
renderTopNav={({ onMenuClick }) => (
<MyTopNav onMenuClick={onMenuClick} />
)}
>
<Dashboard />
</AppShell>Sidebar Nav
Two-panel sidebar com icon rail, navegação hierárquica e workspace switcher. Disponível em dark e light.
Dark
Variante padrão — fundos escuros e dashboards.
Dashboard › Visão Geral
<SidebarNav variant="dark" onNavigate={setNav} />Light
Variante clara — fundo #e0efff, paleta azul suave.
Dashboard › Visão Geral
<SidebarNav variant="light" onNavigate={setNav} />Top Nav
Barra superior com busca, status da fila, help center, notificações e menu do usuário.
Busca + fila + help + notificações + user menu
<TopNav />
// Estrutura interna:
<TopBarShell>
<TopBarLeft> // Search
<TopBarRight> // Queue + Notifications + Help + Status + UserMenu
</TopBarShell>