line-gestao-frontend/src/app/components/header/header.html

<header class="app-header" [class.scrolled]="isScrolled">
  <div class="header-inner container">

    <!-- ✅ LOGADO: hambúrguer + logo JUNTOS -->
    <ng-container *ngIf="isLoggedHeader; else publicHeader">
      <div class="logged-header">
        <div class="left-logged">
          <button class="btn-icon" type="button" (click)="toggleMenu()" aria-label="Abrir menu">
            <i class="bi bi-list"></i>
          </button>

          <a routerLink="/dashboard" class="logo-area" (click)="closeMenu()">
            <div class="logo-icon">
              <i class="bi bi-layers-fill"></i>
            </div>
            <div class="logo-text">
              Line<span class="highlight">Gestão</span>
            </div>
          </a>
        </div>

        <div class="logged-actions">
          <div class="notifications-menu" [class.open]="notificationsOpen" (click)="$event.stopPropagation()">
            <button
              type="button"
              class="btn-icon btn-bell"
              aria-label="Notificações"
              (click)="toggleNotifications()"
              [attr.aria-expanded]="notificationsOpen"
            >
              <i class="bi bi-bell"></i>
              <span class="badge-dot" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
            </button>

            <div class="notifications-dropdown" *ngIf="notificationsOpen">
              <div class="notifications-head">
                <span>Notificações</span>
                <a routerLink="/notificacoes" class="see-all" (click)="closeNotifications()">Ver todas</a>
              </div>

              <div class="notifications-body">
                <div class="notifications-state" *ngIf="notificationsLoading">
                  Carregando...
                </div>
                <div class="notifications-state warn" *ngIf="notificationsError">
                  Falha ao carregar notificações.
                </div>
                <div class="notifications-state" *ngIf="!notificationsLoading && !notificationsError && notifications.length === 0">
                  Nenhuma notificação por aqui.
                </div>

                <div class="notification-item" *ngFor="let n of notifications">
                  <div class="notification-top">
                    <span class="notification-tag" [class.danger]="n.tipo === 'Vencido'" [class.warn]="n.tipo === 'AVencer'">
                      {{ n.tipo === 'Vencido' ? 'Vencido' : 'A vencer' }}
                    </span>
                    <span class="notification-line">{{ n.linha || '-' }}</span>
                  </div>
                  <div class="notification-title">
                    {{ n.linha || '-' }} - {{ n.usuario || n.cliente || '-' }}
                  </div>
                  <div class="notification-info">
                    <div><strong>Linha:</strong> {{ n.linha || '-' }}</div>
                    <div><strong>Usuário:</strong> {{ n.usuario || '-' }}</div>
                    <div><strong>Cliente:</strong> {{ n.cliente || '-' }}</div>
                    <div><strong>{{ n.tipo === 'Vencido' ? 'Venceu em' : 'Vence em' }}:</strong> {{ n.referenciaData ? (n.referenciaData | date:'dd/MM/yyyy') : '-' }}</div>
                  </div>
                  <button type="button" class="mark-read" (click)="markNotificationRead(n)">
                    {{ n.lida ? 'Lida' : 'Marcar como lida' }}
                  </button>
                </div>
              </div>
            </div>
          </div>


          <div class="options-menu" [class.open]="optionsOpen" (click)="$event.stopPropagation()">
            <button
              type="button"
              class="options-trigger"
              (click)="toggleOptions()"
              aria-haspopup="true"
              [attr.aria-expanded]="optionsOpen"
            >
              Opções
              <i class="bi bi-chevron-down"></i>
            </button>

            <div class="options-dropdown" *ngIf="optionsOpen">
              <button type="button" class="options-item" (click)="closeOptions()">
                Perfil
              </button>
              <button type="button" class="options-item danger" (click)="logout()">
                Sair
              </button>
            </div>
          </div>
        </div>
      </div>
    </ng-container>

    <!-- ✅ PÚBLICO (HOME): menu + botão -->
    <ng-template #publicHeader>
      <a routerLink="/" class="logo-area">
        <div class="logo-icon">
          <i class="bi bi-layers-fill"></i>
        </div>
        <div class="logo-text">
          Line<span class="highlight">Gestão</span>
        </div>
      </a>

      <nav class="nav-links">
        <a href="https://www.linemovel.com.br/empresas" target="_blank" class="nav-link">Para Empresas</a>
        <a href="https://www.linemovel.com.br/proposta" target="_blank" class="nav-link">Proposta</a>
        <a href="https://www.linemovel.com.br/sobrenos" target="_blank" class="nav-link">Sobre</a>
      </nav>

      <div class="header-actions">
        <a routerLink="/login" class="btn-login-header">
          Acessar Sistema <i class="bi bi-arrow-right-short"></i>
        </a>
      </div>
    </ng-template>

  </div>

</header>

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast notification-toast" #notifToast>
    <div class="toast-header">
      <strong class="me-auto">Vigência próxima</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body" *ngIf="toastNotification as toastItem">
      A linha {{ toastItem.linha || '-' }} vence em 5 dias.
      <button type="button" class="btn-aware" (click)="acknowledgeNotification(toastItem)" data-bs-dismiss="toast">
        Estou ciente
      </button>
    </div>
  </div>
</div>

<!-- ✅ OVERLAY (logado) -->
<div class="menu-overlay" *ngIf="isLoggedHeader && menuOpen" (click)="closeMenu()"></div>

<!-- ✅ MENU LATERAL (logado) -->
<aside
  *ngIf="isLoggedHeader"
  class="side-menu"
  [class.open]="menuOpen"
  (click)="$event.stopPropagation()"
>
  <div class="side-menu-header">
    <a class="side-logo" routerLink="/dashboard" (click)="closeMenu()">
      <span class="side-logo-icon"><i class="bi bi-layers-fill"></i></span>
      <span class="side-logo-text">Line<span class="highlight">Gestão</span></span>
    </a>

    <button type="button" class="close-btn" aria-label="Fechar menu" (click)="closeMenu()">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>

  <div class="side-menu-body">
    <a routerLink="/dashboard" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-bar-chart-fill"></i> <span>Dashboard</span>
    </a>

    <a routerLink="/geral" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-sim"></i> <span>Geral</span>
    </a>

    <a routerLink="/mureg" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-table"></i> <span>Mureg</span>
    </a>

    <a routerLink="/faturamento" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-receipt"></i> <span>Faturamento</span>
    </a>

    <a routerLink="/vigencia" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-calendar-check"></i> <span>Vigência</span>
    </a>

    <a routerLink="/trocanumero" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-arrow-left-right"></i> <span>Troca de Número</span>
    </a>

    <a routerLink="/dadosusuarios" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-person-lines-fill"></i> <span>Dados dos Usuários</span>
    </a>
  </div>
</aside>