4.3 KiB

Raw Blame History

Guia de Relocação da Logo - Sidebar para Header

Objetivo

Mover a logo do PraFrota da sidebar para o header, aproveitando o novo layout onde o header está sempre visível no topo da aplicação.

Motivação

Com o novo layout implementado (sidebar abaixo do header), faz mais sentido ter a logo no header porque:

✅ Header sempre visível - Logo sempre acessível ao usuário
✅ Melhor hierarquia visual - Logo como elemento principal da aplicação
✅ Padrão moderno - Similar a aplicações como Notion, Linear, Figma
✅ Economia de espaço - Mais espaço na sidebar para navegação

Implementação

1. Remoção da Logo da Sidebar

Template Anterior

<div class="logo-container">
  <img [src]="getCurrentLogo()" alt="PraFrota" class="logo">
  <button class="toggle-btn" (click)="toggleSidebar()">
    <i class="fas fa-chevron-left" [class.rotated]="isCollapsed"></i>
  </button>
</div>

Template Atual

<div class="sidebar-header">
  <button class="toggle-btn" (click)="toggleSidebar()">
    <i class="fas fa-chevron-left" [class.rotated]="isCollapsed"></i>
  </button>
</div>

CSS Simplificado

.sidebar-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid #f0f0f0;
  height: 60px;
}

2. Adição da Logo no Header

Nova Estrutura do Header

<div class="header-content">
  <div class="header-left">
    <div class="logo-container">
      <img [src]="getCurrentLogo()" alt="PraFrota" class="logo">
    </div>
    <div class="header-title">
      <h1>{{ pageTitle$ | async }}</h1>
      <!-- Contador de registros -->
    </div>
  </div>
  
  <div class="header-actions">
    <!-- Ações, tema, notificações, usuário -->
  </div>
</div>

CSS da Logo no Header

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

3. Funcionalidade de Tema

A logo continua reagindo ao tema claro/escuro:

getCurrentLogo() {
  return this.isDarkMode ? 'assets/imagens/logo_for_dark.png' : 'assets/logo.png';
}

ngOnInit() {
  // Subscrever ao estado do tema
  this.subscription.add(
    this.themeService.isDarkMode$.subscribe(isDark => {
      this.isDarkMode = isDark;
    })
  );
}

Arquivos Modificados

1. Sidebar Component

projects/idt_app/src/app/shared/components/sidebar/sidebar.component.ts
- ❌ Removido: logo-container e elementos da logo
- ❌ Removido: Método getCurrentLogo()
- ✅ Adicionado: sidebar-header simplificado
- ✅ Mantido: Botão de toggle da sidebar

2. Header Component

projects/idt_app/src/app/shared/components/header/header.component.ts
- ✅ Adicionado: header-left container
- ✅ Adicionado: logo-container e elemento da logo
- ✅ Adicionado: Método getCurrentLogo()
- ✅ Adicionado: Subscription ao tema para logo dinâmica

Benefícios Alcançados

🎯 UX Melhorado

✅ Logo sempre visível (header fixo)
✅ Identidade visual mais forte
✅ Navegação mais intuitiva
✅ Padrão familiar aos usuários

📱 Layout Otimizado

✅ Mais espaço na sidebar para menu
✅ Header com melhor aproveitamento
✅ Hierarquia visual clara
✅ Design mais limpo

🎨 Visual Moderno

✅ Logo como elemento principal
✅ Layout similar a aplicações modernas
✅ Melhor organização dos elementos
✅ Consistência visual

Considerações Técnicas

✅ Compatibilidade

Temas claro/escuro mantidos
Responsividade preservada
Funcionalidades existentes intactas

✅ Performance

Sem impacto na performance
Carregamento otimizado das imagens
Transições suaves mantidas

✅ Manutenibilidade

Código mais organizado
Responsabilidades bem definidas
Fácil manutenção futura

Validação

✅ Build bem-sucedido
✅ Logo visível no header
✅ Tema dinâmico funcionando
✅ Sidebar limpa e funcional
✅ Layout responsivo mantido

Resultado

A logo agora está posicionada no header, sempre visível ao usuário, criando uma identidade visual mais forte e um layout mais moderno e profissional para o PraFrota.

4.3 KiB Raw Blame History