Visão geral

O Sidebar shadcn foi instalado. O Masi Action Design System usa uma sidebar customizada que pode ser encontrada em action-design-system/styleguide/layout-shell.tsx.

Sidebar customizada

O design system Masi Action usa uma sidebar completamente customizada em action-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

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 Action Design System usa tokens dedicados: --sidebar, --sidebar-foreground, --sidebar-primary, --sidebar-accent (item ativo: branco com texto azul 500, 7.23:1).

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 Action Design System

// A sidebar customizada vive em:
// action-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: #0B37F7 (fundo, mesma camada da section)
// --sidebar-foreground: #FFFFFF (hover: branco 12%)
// --sidebar-accent: #FFFFFF (item ativo — branco)
// --sidebar-accent-foreground: #0B37F7 (texto azul, 7.23:1)
// --sidebar-border: rgba(255,255,255,0.08)

Masi Action Design System - Criado por Chuv Studio