<nav class="hybrid-navigation" 
     [class.main-tabs-only]="showOnlyMainTabs"
     [class.sub-sidebar-only]="showOnlySubSidebar">
  
  <!-- Tabs Principales (Modules) -->
  <div class="main-tabs" *ngIf="!showOnlySubSidebar">
    <div class="tabs-container">
      <!-- Modules depuis les vraies données -->
      <button *ngFor="let module of mainModules$ | async; trackBy: trackByModuleId"
              class="main-tab"
              [class.active]="(activeModule$ | async) === module.id"
              [style.--module-color]="module.color"
              (click)="navigateToModule(module)"
              [matTooltip]="module.name">
        <mat-icon class="tab-icon">{{ module.icon }}</mat-icon>
        <span class="tab-label">{{ module.name }}</span>
      </button>
    </div>
  </div>
  
  <!-- Sidebar Contextuelle (Sous-modules) -->
  <div class="sub-sidebar" 
       *ngIf="!showOnlyMainTabs && (subModules$ | async)?.length && (subModules$ | async)!.length > 0"
       [class.collapsed]="collapsed">
    
    <!-- Header Sidebar -->
    <div class="sidebar-header">
      <div class="module-info">
        <div class="module-icon" [style.background]="getActiveModuleColor()">
          <mat-icon>{{ getActiveModuleIcon() }}</mat-icon>
        </div>
        <div class="module-details" *ngIf="!collapsed">
          <h4 class="module-name">{{ getActiveModuleName() }}</h4>
          <p class="module-description">{{ getActiveModuleDescription() }}</p>
        </div>
      </div>
    </div>
    
    <!-- Liste des Sous-modules -->
    <div class="sub-modules-list">
      <button *ngFor="let subModule of subModules$ | async; trackBy: trackBySubModuleId"
              class="sub-module-item"
              [class.active]="(activeSubModule$ | async) === subModule.id"
              (click)="navigateToSubModule(subModule)"
              [matTooltip]="collapsed ? subModule.name : ''">
        
        <div class="sub-item-content">
          <mat-icon class="sub-icon">{{ subModule.icon }}</mat-icon>
          
          <div class="sub-details" *ngIf="!collapsed">
            <span class="sub-name">{{ subModule.name }}</span>
            <span class="sub-count" *ngIf="subModule.count > 0">
              {{ subModule.count | number }}
            </span>
          </div>
        </div>
        
        <!-- Indicateur actif -->
        <div class="active-indicator" 
             *ngIf="(activeSubModule$ | async) === subModule.id">
        </div>
      </button>
    </div>
    
    <!-- Footer Sidebar -->
    <div class="sidebar-footer" *ngIf="!collapsed">
      <div class="footer-stats">
        <div class="stat-item">
          <mat-icon>visibility</mat-icon>
          <span>{{ getTotalVisibleItems() }} éléments</span>
        </div>
        <div class="stat-item">
          <mat-icon>update</mat-icon>
          <span>Mis à jour {{ getLastUpdateTime() }}</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Toggle Sidebar (Mobile) -->
  <button class="sidebar-toggle"
          (click)="toggleSidebar()"
          [class.collapsed]="collapsed"
          matTooltip="Basculer la sidebar">
    <mat-icon>{{ collapsed ? 'menu_open' : 'menu' }}</mat-icon>
  </button>
  
</nav>