Page Layout
Layout padrão de página usado em todos os portais SYSGO. Combina Sidebar + Header + Content Area. Viewport fixa sem scroll externo.
// apps/*/app/[locale]/(dashboard)/layout.tsx
import { SidebarProvider, SidebarInset } from "@workspace/ui/components/sidebar";
import { AppSidebar } from "@workspace/ui/components/app-sidebar";
import { AppHeader } from "@workspace/ui/components/app-header";
export default function DashboardLayout({ children }) {
return (
<SidebarProvider defaultOpen={true}>
<AppSidebar
items={menuItems}
title="Centro de Comandos"
showSearch
userProfile={userProfile}
/>
<SidebarInset className="flex h-screen flex-col overflow-hidden">
<AppHeader menuItems={menuItems} />
<main className="flex-1 overflow-auto bg-background">
{children}
</main>
</SidebarInset>
</SidebarProvider>
);
}Layout completo (1440px)
Representação do layout conforme Figma. Sidebar 191px + Content 1249px.
Consultoras
AdicionarBuscar por nome
PlanoStatusEditar Colunas
Nome
Email
Telefone
Plano
Status
Vendedora
Criado
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
Rosilene Ferreira Neves
rosilenemarquesn@gmail.com
(21) 97988-1544
Master
Pré-cadastrada
Estefany Oliveira
06 de fev. de 2026 10:39
32 itens
AnteriorPróxima
Estrutura do layout
| Componente | Classe | Função |
|---|---|---|
SidebarProvider | defaultOpen={true} | Contexto de estado da sidebar (persiste em cookie) |
AppSidebar | collapsible="icon" | Navegação lateral colapsável |
SidebarInset | flex h-screen flex-col overflow-hidden | Container principal (previne scroll duplo) |
AppHeader | sticky top-0 z-20 h-10 | Barra superior fixa |
main | flex-1 overflow-auto bg-background | Área de conteúdo com scroll vertical |
Dimensões (Figma 1440px)
| Área | Largura | Altura |
|---|---|---|
| Viewport total | 1440px | 1024px |
| Sidebar | 191px (colapsável: ~48px) | 100vh |
| Header | 1249px (full - sidebar) | 40px (h-10) |
| Content area | 1249px | 984px (viewport - header) |
| Content padding | 59px left, 71px right | Varia por página |
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
SidebarProvider.defaultOpen | boolean | true | Estado inicial da sidebar (persiste em cookie) |
AppSidebar.items | MenuItems[] | — | Itens de navegação da sidebar |
AppSidebar.title | string | — | Título exibido no topo da sidebar |
AppSidebar.showSearch | boolean | false | Exibir campo de busca (command dialog) |
AppSidebar.userProfile | { name, email, avatarUrl? } | — | Dados do usuário para o rodapé da sidebar |
AppSidebar.collapsible | 'offcanvas' | 'icon' | 'none' | 'icon' | Modo de colapso da sidebar (colapsável) |
SidebarInset | ReactNode | — | Container principal ao lado da sidebar (previne scroll duplo) |
AppHeader.menuItems | MenuItems[] | — | Itens do menu para gerar breadcrumb automaticamente |