testes/Modulos Angular/projects/idt_app/docs/layout/SIDEBAR_STYLING_GUIDE.md

Guia de Estilização da Sidebar - Destaque Dourado

Objetivo

Implementar destaque dourado para o item ativo/selecionado na sidebar, harmonizando com a identidade visual do PraFrota.

Funcionalidade de Expansão Temporária

A sidebar possui uma funcionalidade inteligente de expansão temporária quando está recolhida (collapsed). Esta feature melhora significativamente a UX ao permitir acesso rápido aos subitens sem perder a economia de espaço.

flowchart TD
    A["Usuário clica em item<br/>com subitens"] --> B{"Sidebar está<br/>collapsed?"}
    
    B -->|Não| C["Comportamento normal:<br/>Alterna expanded"]
    B -->|Sim Desktop| D["Expansão temporária:<br/>isTemporarilyExpanded = true"]
    
    D --> E["Sidebar expande para 240px<br/>Mostra texto e subitens"]
    E --> F["Timer de 10s inicia"]
    
    F --> G{"Usuário clica<br/>em subitem?"}
    G -->|Sim| H["Navega para rota<br/>Fecha expansão temporária"]
    G -->|Não - 10s| I["Auto-fecha expansão"]
    
    J["Clique fora da sidebar"] --> K["Fecha expansão temporária"]
    
    L["Estados da Sidebar"] --> M["Normal: width 240px"]
    L --> N["Collapsed: width 80px"]
    L --> O["Temp Expanded: width 240px<br/>z-index maior"]
    
    style D fill:#f1c232,color:#000
    style E fill:#e8f5e8
    style H fill:#e8f5e8
    style O fill:#fff2cc

Estados da Sidebar:

• Normal (240px): Totalmente expandida com todos os elementos visíveis
• Collapsed (80px): Apenas ícones visíveis para economia de espaço
• Temporarily Expanded (240px): Expansão temporária com z-index elevado e sombra destacada

Comportamentos:

• Desktop: Expansão temporária inteligente com auto-fechamento
• Mobile: Mantém comportamento de toggle completo existente
• Auto-fechamento: Timer de 10 segundos ou clique fora da sidebar
• Navegação: Fecha imediatamente ao selecionar um subitem

Implementação

1. Variáveis CSS Ajustadas

Theme Claro (:root)

--active-bg: #FFF8E1; // Fundo dourado suave

Theme Escuro (.dark-theme)

--active-bg: rgba(241, 196, 15, 0.2); // Fundo dourado translúcido

1.1. Classes para Expansão Temporária

Sidebar Temporariamente Expandida

.sidebar.temporarily-expanded {
  width: 240px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  z-index: 1003 !important;
}

.sidebar.temporarily-expanded .menu-text,
.sidebar.temporarily-expanded .notification,
.sidebar.temporarily-expanded .expand-icon,
.sidebar.temporarily-expanded .submenu {
  display: block !important;
}

.sidebar.temporarily-expanded .menu-item {
  justify-content: flex-start !important;
  padding: 0.75rem 1rem !important;
}

2. Aplicação na Sidebar

Menu Principal

O destaque é aplicado automaticamente através da classe .active no item selecionado da sidebar:

.menu > ul > li.active > .menu-item {
  background-color: #FFC82E;
  color: #8B4513;
  font-weight: 600;
  border-radius: 12px;
  margin: 0 0.75rem;
  border-left: none;
}

Submenu

O submenu segue o mesmo padrão visual:

.submenu li.active .submenu-item {
  background-color: #FFC82E;
  color: #8B4513;
  font-weight: 600;
  border-radius: 8px;
  margin: 0.25rem 0.75rem;
}

.submenu-item:hover {
  background-color: rgba(255, 200, 46, 0.1);
  color: var(--primary);
}

3. Cores e Estilos Utilizados

• Fundo: #FFC82E (Dourado vibrante)
• Texto: #8B4513 (Marrom escuro para contraste)
• Fonte: Peso 600 (semi-bold) para destaque
• Formato: Cantos arredondados (12px)
• Margem: 0.75rem nas laterais para criar espaçamento

4. Resultado Visual

Menu Principal e Submenu

• ✅ Destaque dourado harmonioso com a identidade visual
• ✅ Boa legibilidade em ambos os temas (claro/escuro)
• ✅ Consistência com o header e outras partes da aplicação
• ✅ Feedback visual claro para o usuário
• ✅ Submenu com mesmo padrão visual (cantos arredondados menores)
• ✅ Hover suave com cor dourada translúcida
• ✅ Hierarquia visual clara entre menu principal e submenu

5. Arquivos Modificados

• projects/idt_app/src/assets/styles/app.scss - Variáveis CSS globais
• projects/idt_app/src/app/shared/components/sidebar/sidebar.component.ts - Funcionalidade de expansão temporária

6. Estrutura da Sidebar

A sidebar utiliza a classe active para destacar o item selecionado:

<li [class.active]="selectedItem === item.id">
  <div class="menu-item">
    <i [class]="item.icon"></i>
    <span class="menu-text">{{ item.label }}</span>
  </div>
</li>

Notas Técnicas

• As cores são definidas via variáveis CSS para facilitar manutenção
• O sistema de temas é totalmente suportado
• A implementação é reutilizável em outros componentes
• Não há impacto na performance ou funcionalidade

Validação

Estilização

• ✅ Build bem-sucedido
• ✅ Compatibilidade com temas claro/escuro
• ✅ Harmonia visual com a identidade da aplicação

Funcionalidade de Expansão Temporária

• ✅ Expansão automática ao clicar em itens com subitens (quando collapsed)
• ✅ Auto-fechamento após 10 segundos de inatividade
• ✅ Fechamento ao clicar fora da sidebar
• ✅ Fechamento imediato ao navegar para subitem
• ✅ Comportamento responsivo (desktop vs mobile)
• ✅ Z-index elevado para sobrepor conteúdo
• ✅ Transições suaves e visuais destacados