Visão geral

O Design System PAM usa uma sidebar customizada que pode ser encontrada em aceleracao-design-system/styleguide/layout-shell.tsx. O Sidebar do shadcn/ui não vem no pacote.

Sidebar customizada

O design system PAM usa uma sidebar completamente customizada em aceleracao-design-system/styleguide/layout-shell.tsx. Ela inclui colapso/expansão animada, menu mobile (drawer lateral), e navegação por seções. Você pode ver ela funcionando ao lado desta página.

Import do componente shadcn (após instalar no seu projeto)

import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "./components/ui/sidebar" // npx shadcn@latest add sidebar

Tokens de sidebar

O sistema de cores da sidebar no Design System PAM usa tokens dedicados: --sidebar, --sidebar-foreground, --sidebar-primary, --sidebar-accent (cor de destaque Aceleração, var(--brand-accent), apenas para item ativo).

Sidebar shadcn — uso básico

Como usar o componente Sidebar do shadcn em um novo projeto.

Estrutura básica com SidebarProvider

import {
  SidebarProvider, Sidebar, SidebarContent,
  SidebarMenu, SidebarMenuButton, SidebarMenuItem
} from "./components/ui/sidebar" // npx shadcn@latest add sidebar

export default function Layout({ children }) {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild>
                <a href="/dashboard">Dashboard</a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <main>{children}</main>
    </SidebarProvider>
  )
}

Sidebar customizada do Design System PAM

// A sidebar customizada vive em:
// aceleracao-design-system/styleguide/layout-shell.tsx

// Características:
// - Animação de colapso/expansão (translateX)
// - Menu mobile com overlay
// - Botão de colapso fixo na borda da sidebar
// - Tab de expansão visível ao mover o mouse

// Tokens de cor usados:
// --sidebar: #071B36 (fundo, camada da section)
// --sidebar-foreground: #E1E8F2
// --sidebar-accent: var(--brand-accent) (item ativo — cor de destaque Aceleração)
// --sidebar-accent-foreground: var(--brand-accent-foreground)
// --sidebar-border: rgba(255,255,255,0.1)

Design System PAM - Criado por Chuv Studio