# 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.

```mermaid
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`)
```scss
--active-bg: #FFF8E1; // Fundo dourado suave
```

#### Theme Escuro (`.dark-theme`)
```scss
--active-bg: rgba(241, 196, 15, 0.2); // Fundo dourado translúcido
```

### 1.1. Classes para Expansão Temporária

#### Sidebar Temporariamente Expandida
```scss
.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:

```scss
.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:

```scss
.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:

```html
<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