Componentes/Sidebar

Sidebar

Navegação lateral genérica com grupos de itens, ícones Material Symbols, header com logo e footer com versão. Width 240px, sticky top 0, height 100vh.

Navegação

Figma: —

Preview

Sidebar (240px)

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<aside class="trdr-sidebar">
  <div class="trdr-sidebar-header">
    <img src="/logo.svg" alt="Logo" width="120" />
  </div>

  <nav class="trdr-sidebar-nav">
    <div class="trdr-sidebar-group">
      <span class="trdr-sidebar-group-label">Visão Geral</span>
      <ul class="trdr-sidebar-list">
        <li>
          <a href="/" class="trdr-sidebar-item trdr-sidebar-item-active">
            <span class="trdr-sidebar-icon">home</span>
            Home
          </a>
        </li>
      </ul>
    </div>

    <div class="trdr-sidebar-group">
      <span class="trdr-sidebar-group-label">Tokens</span>
      <ul class="trdr-sidebar-list">
        <li>
          <a href="/tokens" class="trdr-sidebar-item">
            <span class="trdr-sidebar-icon">grain</span>
            Primitivos
          </a>
        </li>
        <li>
          <a href="/semanticos" class="trdr-sidebar-item">
            <span class="trdr-sidebar-icon">join_left</span>
            Semânticos
          </a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="trdr-sidebar-footer">
    <span class="trdr-sidebar-version">v1.5</span>
    <span class="trdr-sidebar-version-label">designtokens.md</span>
  </div>
</aside>

Dimensões

Variante	Largura	Altura
Default	`240px`	`100vh`
Item	`100%`	`32px`
Icon	`20px`	`20px`

Props / Variantes

Prop	Tipo	Valores
`Width`	enum	`240px (default)`

Tokens Utilizados

Propriedade	Token	Valor
BG	`bg-secondary`	`#0E0E0E`
Border	`border-subtle`	`#222222`
Group label	`content-brand`	`#00D4FF`
Item text	`content-secondary`	`#E8E8E8`
Item hover text	`content-primary`	`#FFFFFF`
Item hover BG	`surface-secondary`	`#222222`
Item active text	`content-primary`	`#FFFFFF`
Item active BG	`surface-secondary`	`#222222`
Icon color	`content-tertiary`	`#A4A4A4`
Icon active	`content-secondary`	`#E8E8E8`
Version BG	`surface-brand`	`#00D4FF29`
Version text	`content-brand`	`#00D4FF`
Version label	`content-tertiary`	`#A4A4A4`

Anatomia

[aside.trdr-sidebar]
  ├── [div.trdr-sidebar-header]  ← logo, padding 32px, border-bottom
  ├── [nav.trdr-sidebar-nav]  ← flex-1, padding 32px 24px, gap 32px
  │     └── [div.trdr-sidebar-group] × N
  │           ├── [span.trdr-sidebar-group-label]  ← 12px/400, brand, uppercase
  │           └── [ul.trdr-sidebar-list]
  │                 └── [li > a.trdr-sidebar-item .trdr-sidebar-item-active?]
  │                       ├── [span.trdr-sidebar-icon]  ← Material Symbols 20px
  │                       └── label text
  └── [div.trdr-sidebar-footer]  ← border-top, flex, gap 8px
        ├── [span.trdr-sidebar-version]  ← mono 11px, brand bg/text
        └── [span.trdr-sidebar-version-label]  ← 11px, tertiary

Item: height 32px, padding 0 8px, gap 8px, radius 4px, Inter 14px/400
Hover: text primary, bg surface-secondary
Active: mesmos estilos de hover + icon secondary