Visão geral

O Sidebar shadcn foi instalado. O MN Design System usa uma sidebar customizada que pode ser encontrada em src/app/styleguide/layout.tsx.

Sidebar customizada

O design system MN usa uma sidebar completamente customizada em src/app/styleguide/layout.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"

Tokens de sidebar

O sistema de cores da sidebar no MN Design System usa tokens dedicados: --sidebar, --sidebar-foreground, --sidebar-primary, --sidebar-accent (Brand Green #AFF000, 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"

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

// A sidebar customizada vive em:
// src/app/styleguide/layout.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: #AFF000 (item ativo — Brand Green)
// --sidebar-border: #FFFFFF

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter