Design System

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.

Centro de Comandos

Ana Paula

Admin

Consultoras

Adicionar
Buscar por nome
PlanoStatus
Editar 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

ComponenteClasseFunção
SidebarProviderdefaultOpen={true}Contexto de estado da sidebar (persiste em cookie)
AppSidebarcollapsible="icon"Navegação lateral colapsável
SidebarInsetflex h-screen flex-col overflow-hiddenContainer principal (previne scroll duplo)
AppHeadersticky top-0 z-20 h-10Barra superior fixa
mainflex-1 overflow-auto bg-backgroundÁrea de conteúdo com scroll vertical

Dimensões (Figma 1440px)

ÁreaLarguraAltura
Viewport total1440px1024px
Sidebar191px (colapsável: ~48px)100vh
Header1249px (full - sidebar)40px (h-10)
Content area1249px984px (viewport - header)
Content padding59px left, 71px rightVaria por página

API Reference

PropTypeDefaultDescrição
SidebarProvider.defaultOpenbooleantrueEstado inicial da sidebar (persiste em cookie)
AppSidebar.itemsMenuItems[]Itens de navegação da sidebar
AppSidebar.titlestringTítulo exibido no topo da sidebar
AppSidebar.showSearchbooleanfalseExibir 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)
SidebarInsetReactNodeContainer principal ao lado da sidebar (previne scroll duplo)
AppHeader.menuItemsMenuItems[]Itens do menu para gerar breadcrumb automaticamente