4.6 KiB

Raw Blame History

Guia de Reestruturação do Layout - Sidebar Abaixo do Header

Objetivo

Implementar um layout moderno onde a sidebar fica posicionada abaixo do header, similar a aplicações como Notion, Linear e outras ferramentas modernas.

Estrutura Anterior vs Nova

❌ Layout Anterior

┌─────────────────────────────────────┐
│ Sidebar │        Header            │
│         ├─────────────────────────┤
│         │                         │
│         │       Conteúdo          │
│         │                         │
└─────────┴─────────────────────────┘

✅ Novo Layout

┌─────────────────────────────────────┐
│              Header                 │
├─────────┬─────────────────────────┤
│ Sidebar │                         │
│         │       Conteúdo          │
│         │                         │
└─────────┴─────────────────────────┘

Implementação

1. Estrutura do Main Layout

<div class="app-container">
  <!-- Header sempre no topo -->
  <app-header class="app-header"></app-header>
  
  <!-- Container para sidebar e conteúdo principal -->
  <div class="content-container">
    <app-sidebar #sidebar></app-sidebar>
    <div class="main-content">
      <div class="page-content">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

2. CSS da Nova Estrutura

App Container

.app-container {
  display: flex;
  flex-direction: column;  // ✅ Mudança principal
  min-height: 100vh;
}

Header

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 60px;
  width: 100%;  // ✅ Largura total agora
}

Content Container

.content-container {
  display: flex;
  flex: 1;
  margin-top: 60px;  // ✅ Espaço para o header
  height: calc(100vh - 60px);
}

Sidebar

.sidebar {
  position: relative;  // ✅ Não mais fixed
  height: 100%;        // ✅ Altura do container, não viewport
}

3. Responsividade Mobile

Em mobile, a sidebar continua funcionando como overlay:

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 60px;           // ✅ Abaixo do header
    left: 0;
    height: calc(100vh - 60px);
    z-index: 1002;
  }
}

Benefícios da Nova Estrutura

🎯 UX Melhorado

✅ Header sempre visível e acessível
✅ Navegação mais intuitiva
✅ Layout similar a aplicações modernas
✅ Hierarquia visual mais clara

📱 Mobile Friendly

✅ Melhor aproveitamento do espaço
✅ Header fixo facilita acesso a configurações
✅ Sidebar como overlay preserva funcionalidade

🎨 Design Moderno

✅ Visual mais limpo e profissional
✅ Reduz concorrência visual
✅ Aproveita melhor o espaço horizontal

Arquivos Modificados

1. Main Layout Component

projects/idt_app/src/app/shared/components/main-layout/main-layout.component.ts
- Reestruturação do template
- Novos estilos CSS para layout em coluna
- Ajustes de responsividade

2. Sidebar Component

projects/idt_app/src/app/shared/components/sidebar/sidebar.component.ts
- Mudança de position: fixed para position: relative
- Ajustes para mobile overlay abaixo do header
- Altura ajustada para 100% do container

3. Header Component

projects/idt_app/src/app/shared/components/header/header.component.ts
- Largura ajustada para 100%
- Z-index aumentado para 1001
- Removida dependência da largura da sidebar

Considerações Técnicas

✅ Compatibilidade

Todas as funcionalidades existentes mantidas
Mobile menu continua funcionando
Temas claro/escuro preservados

✅ Performance

Sem impacto na performance
Transições suaves mantidas
Scroll otimizado

✅ Manutenibilidade

Código mais limpo e organizado
Estrutura mais fácil de entender
Responsividade simplificada

Validação

✅ Build bem-sucedido
✅ Layout responsivo funcionando
✅ Sidebar mobile como overlay
✅ Header sempre visível
✅ Navegação fluida

Resultado

O layout agora segue padrões modernos de design, oferecendo uma experiência mais profissional e intuitiva para os usuários do PraFrota.

4.6 KiB Raw Blame History