Visão geral

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

Sidebar customizada

O design system Masi Academy usa uma sidebar completamente customizada em academy-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 Masi Academy Design System usa tokens dedicados: --sidebar, --sidebar-foreground, --sidebar-primary, --sidebar-accent (cor de destaque Academy, 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 Masi Academy Design System

// A sidebar customizada vive em:
// academy-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: #ECECEC (fundo)
// --sidebar-foreground: #1F1F1F
// --sidebar-accent: var(--brand-accent) (item ativo — cor de destaque Academy)
// --sidebar-accent-foreground: var(--brand-accent-foreground)
// --sidebar-border: #FFFFFF

Masi Academy Design System - Criado por Chuv Studio