Sidebar | DS CANTA.

Sidebar Basica

<div class="canta-sidebar">
  <div class="canta-sidebar__header">
    <a href="#" class="canta-sidebar__brand">
      <span class="canta-sidebar__brand-text">CANTA.</span>
    </a>
  </div>
  <div class="canta-sidebar__content">
    <nav class="canta-sidebar__nav">
      <span class="canta-sidebar__nav-title">Menu</span>
      <ul class="canta-sidebar__menu">
        <li class="canta-sidebar__item">
          <a href="#" class="canta-sidebar__link canta-sidebar__link--active">
            <span class="canta-sidebar__link-icon">...</span>
            <span class="canta-sidebar__link-text">Dashboard</span>
          </a>
        </li>
        <li class="canta-sidebar__item">
          <a href="#" class="canta-sidebar__link">
            <span class="canta-sidebar__link-icon">...</span>
            <span class="canta-sidebar__link-text">Usuarios</span>
            <span class="canta-sidebar__link-badge">5</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="canta-sidebar__footer">
    <div class="canta-sidebar__user">
      <div class="canta-sidebar__avatar"><img src="avatar.jpg" alt=""></div>
      <div class="canta-sidebar__user-info">
        <div class="canta-sidebar__user-name">Joao Silva</div>
        <div class="canta-sidebar__user-role">Administrador</div>
      </div>
    </div>
  </div>
</div>

Com Submenu

<li class="canta-sidebar__item canta-sidebar__item--expanded">
  <a href="#" class="canta-sidebar__link">
    <span class="canta-sidebar__link-icon">...</span>
    <span class="canta-sidebar__link-text">Produtos</span>
    <span class="canta-sidebar__submenu-toggle"></span>
  </a>
  <ul class="canta-sidebar__submenu canta-sidebar__submenu--open">
    <li><a href="#" class="canta-sidebar__submenu-link canta-sidebar__submenu-link--active">Listagem</a></li>
    <li><a href="#" class="canta-sidebar__submenu-link">Categorias</a></li>
  </ul>
</li>

<!-- Divisor entre secoes -->
<div class="canta-sidebar__divider"></div>

Estado Colapsado

Ao colapsar, apenas icones ficam visiveis. Passe o mouse sobre os icones para ver tooltips.

<!-- Adicione --collapsed para colapsar -->
<div class="canta-sidebar canta-sidebar--collapsed">
  <!-- Use data-tooltip nos links para tooltip em modo colapsado -->
  <a href="#" class="canta-sidebar__link" data-tooltip="Dashboard">
    <span class="canta-sidebar__link-icon">...</span>
    <span class="canta-sidebar__link-text">Dashboard</span>
  </a>
</div>

<!-- Botao toggle para colapsar/expandir -->
<button class="canta-sidebar__toggle">
  <span class="canta-sidebar__toggle-icon"></span>
</button>

Variante Dark

<div class="canta-sidebar canta-sidebar--dark">
  <!-- ... conteudo da sidebar ... -->
</div>

Acentos de Cor

<div class="canta-sidebar canta-sidebar--blue">...</div>
<div class="canta-sidebar canta-sidebar--magenta">...</div>
<div class="canta-sidebar canta-sidebar--bordered">...</div>
<div class="canta-sidebar canta-sidebar--fixed">...</div>

Layout Helper

Use .canta-sidebar-layout para montar o layout sidebar + conteudo principal.

<div class="canta-sidebar-layout">
  <div class="canta-sidebar-layout__sidebar">
    <div class="canta-sidebar">...</div>
  </div>
  <div class="canta-sidebar-layout__main">
    <!-- Conteudo principal -->
  </div>
</div>

API

Classe	Descricao
`.canta-sidebar`	Container principal (largura 280px, borda brutalista)
`.canta-sidebar__header`	Cabecalho com logo e toggle
`.canta-sidebar__brand`	Area da marca (link)
`.canta-sidebar__logo`	Container do logotipo
`.canta-sidebar__brand-text`	Texto da marca
`.canta-sidebar__toggle`	Botao para colapsar/expandir
`.canta-sidebar__toggle-icon`	Seta do botao toggle
`.canta-sidebar__content`	Area de conteudo rolavel
`.canta-sidebar__nav`	Secao de navegacao
`.canta-sidebar__nav-title`	Titulo da secao (uppercase, cinza)
`.canta-sidebar__menu`	Lista de itens (ul)
`.canta-sidebar__item`	Item do menu (li)
`.canta-sidebar__item--expanded`	Item com submenu aberto
`.canta-sidebar__link`	Link de navegacao
`.canta-sidebar__link--active`	Estado ativo (fundo preto, texto branco)
`.canta-sidebar__link-icon`	Container do icone do link
`.canta-sidebar__link-text`	Texto do link
`.canta-sidebar__link-badge`	Badge numérica (fundo magenta)
`.canta-sidebar__submenu`	Submenu aninhado (oculto por padrao)
`.canta-sidebar__submenu--open`	Submenu visivel
`.canta-sidebar__submenu-link`	Link do submenu (borda esquerda)
`.canta-sidebar__submenu-link--active`	Link ativo do submenu
`.canta-sidebar__submenu-toggle`	Seta de expandir/colapsar submenu
`.canta-sidebar__divider`	Divisor horizontal (2px preto)
`.canta-sidebar__footer`	Rodape fixo no fundo
`.canta-sidebar__user`	Area do usuario no footer
`.canta-sidebar__avatar`	Avatar do usuario
`.canta-sidebar__user-info`	Container nome/cargo
`.canta-sidebar__user-name`	Nome do usuario
`.canta-sidebar__user-role`	Cargo/funcao do usuario
`.canta-sidebar--collapsed`	Estado colapsado (72px, apenas icones)
`.canta-sidebar--dark`	Variante com fundo preto
`.canta-sidebar--blue`	Acento azul nos links ativos
`.canta-sidebar--magenta`	Acento magenta nos links ativos
`.canta-sidebar--bordered`	Adiciona sombra brutalista
`.canta-sidebar--fixed`	Posicao fixa (left: 0)
`.canta-sidebar--open`	Sidebar aberta em mobile
`.canta-sidebar-layout`	Layout helper (flex row, min-height 100vh)
`.canta-sidebar-layout__sidebar`	Coluna da sidebar (flex-shrink 0)
`.canta-sidebar-layout__main`	Coluna do conteudo (flex 1)
`.canta-sidebar-overlay`	Overlay para mobile
`.canta-sidebar-overlay--open`	Overlay visivel