DSNiemeyer
Language

Layout

Base composition for any app view — `AppShell` wrapper with a `SidebarNav` rail/panel and a `TopBarShell` on top. Each section below shows one piece in isolation.

AppShell

Collapsible sidebar + top nav + content

Visão Geral

Métricas e atividades das suas propriedades.

Total de Imóveis

248

+12vs. mês anterior

Taxa de Ocupação

94.2%

+2.1%vs. mês anterior

Receita Mensal

R$ 1.2M

+8.3%vs. mês anterior

Inquilinos Ativos

1.847

-3vs. mês anterior

Ocupação por Região

SP
RJ
MG
PR
SC

Atividade Recente

Contrato AP 302 assinado
Vistoria Rua Augusta agendada
Pagamento R$ 3.500 recebido
Manutenção Bloco B concluída
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 with icon rail, hierarchical nav, and workspace switcher. Available in dark and light.

DashboardVisão Geral

<SidebarNav onNavigate={setNav} />

Top Nav

Top bar with search, queue status, help center, notifications, and user menu.

Search + queue + help + notifications + user menu

<TopNav />

// Estrutura interna:
<TopBarShell>
  <TopBarLeft>   // Search
  <TopBarRight>  // Queue + Notifications + Help + Status + UserMenu
</TopBarShell>