Réplica funcional — compare com o sistema real lado a lado

Sidebar — réplica funcional

HTML + CSS puro + 60 linhas de JS · sem MUI · todos os valores da especificação

O que testar

  • Recolher: o botão flutuante na borda (ou M) alterna 300px ↔ 88px em 120ms linear — repare que o conteúdo desliza junto.
  • Subheader: passe o mouse em “GERENCIAMENTO” — a seta surge à esquerda e o rótulo empurra 4px; clique colapsa o grupo.
  • Item com filhos: clique em “Atividade Fiscal” — expande com animação; os filhos têm a linha vertical e o cotovelo curvo.
  • Ativo: “Execução” é a rota ativa — o sub fica escuro (não verde); o pai aberto fica cinza. Clique em “Visão Geral”: item raiz ativo fica verde com fundo verde 8%.
  • Mini: recolha e veja os blocos de 56px com ícone 22px + rótulo 8,75px; a seta dos itens com filhos vira um chevron no canto.

Medidas em uso nesta página

Item raiz 44px · sub 36px · raio 8px · gap 4px · ícone 24px · título 12,25px/500 (ativo 600) · subheader 9,625px/700 CAPS · ativo raiz #00A76F sobre rgba(0,167,111,.08) · hover rgba(145,158,171,.08) · borda rgba(145,158,171,.12) · bullet 12px #EDEFF2.