marketplaces/src/app/components/header/header.component.html

  <!-- platform VERSION - Redesigned 2026 -->
  <header class="platform-header" [class.platform-header--static]="headerConfig().sticky === false" [class.platform-header--centered]="headerConfig().layout === 'centered'">
    <div class="platform-header-container">
      <!-- Logo -->
      @if (headerConfig().showLogo) {
        <a [attr.href]="homeUrl" class="platform-logo" (click)="navigateHome($event)">
          <app-logo />
        </a>
      }

      <!-- Navigation Buttons (desktop) -->
      <nav class="platform-nav">
        <div class="platform-nav-group">
          <a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}"
             (click)="closeMenu()" class="platform-nav-btn">
            {{ 'header.home' | translate }}
          </a>
          @if (headerConfig().showCategories) {
            <button type="button" (click)="navigateToCatalog()" class="platform-nav-btn">
              {{ 'header.catalog' | translate }}
            </button>
          }
          @for (page of headerPages(); track page.id) {
            <button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn">
              {{ page.title }}
            </button>
          }
        </div>
      </nav>

      <!-- Search Box (desktop) -->
      @if (headerConfig().showSearch) {
      <div class="platform-search-wrapper">
        <div class="platform-search-box">
          <app-icon name="search" [size]="20" class="platform-search-icon" />
          <input type="text" [placeholder]="'header.searchPlaceholder' | translate" class="platform-search-input" (click)="navigateToSearch()" readonly />
        </div>
      </div>
      }

      <!-- Search Icon (mobile only) -->
      @if (headerConfig().showSearch) {
      <button class="platform-search-mobile" (click)="navigateToSearch()" [attr.aria-label]="'header.search' | translate">
        <app-icon name="search" [size]="18" />
      </button>
      }

      <!-- Right Actions -->
      <div class="platform-actions">
        @if (headerConfig().showWishlist && features().wishlist && userExperienceConfig().wishlist.enabled) {
          <button type="button" class="platform-ux-btn" (click)="navigateToWishlist()" [attr.aria-label]="'header.wishlist' | translate">
            <app-icon name="heart" [size]="16" class="platform-ux-icon" />
            @if (userExperienceConfig().wishlist.headerBadgeEnabled && wishlistCount() > 0) {
              <span class="platform-ux-badge">{{ wishlistCount() }}</span>
            }
          </button>
        }

        @if (headerConfig().showCompare && features().compare && userExperienceConfig().compare.enabled) {
          <button type="button" class="platform-ux-btn" (click)="navigateToCompare()" [attr.aria-label]="'header.compare' | translate">
            <app-icon name="scale" [size]="16" class="platform-ux-icon" />
            @if (compareCount() > 0) {
              <span class="platform-ux-badge">{{ compareCount() }}</span>
            }
          </button>
        }

        <!-- Cart Button -->
        @if (headerConfig().showCart) {
        <a [routerLink]="'/cart' | langRoute" routerLinkActive="platform-cart-active" class="platform-cart-btn" (click)="closeMenu()">
          <span class="platform-cart-icon">
            <app-icon name="cart" [size]="24" />
            @if (cartItemCount() > 0) {
              <span class="platform-cart-badge">{{ cartItemCount() }}</span>
            }
          </span>
          @if (cartItemCount() > 0) {
            <span class="platform-cart-total">{{ formatCartTotal(cartTotal()) }}</span>
          }
        </a>
        }

        <!-- Region Selector (desktop only) -->
        @if (headerConfig().showRegion) {
        <div class="platform-region-selector platform-lang-desktop">
          <app-region-selector />
        </div>
        }

        <!-- Language Selector (desktop only) -->
        @if (headerConfig().showLanguages) {
        <div class="platform-lang-selector platform-lang-desktop">
          <app-language-selector />
        </div>
        }

        <!-- Mobile Menu Toggle -->
        <button class="platform-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen" [attr.aria-label]="menuOpen ? ('header.closeMenu' | translate) : ('header.openMenu' | translate)" [attr.aria-expanded]="menuOpen">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
    </div>
  </header>

  <!-- Mobile Menu Backdrop (outside header to blur page content) -->
  @if (menuOpen) {
    <div class="platform-menu-backdrop" (click)="closeMenu()"></div>
  }

  <!-- Mobile Menu Panel (outside header for correct stacking) -->
  <div class="platform-mobile-menu" [class.platform-mobile-menu-open]="menuOpen">
      <a [routerLink]="'/' | langRoute" routerLinkActive="platform-mobile-active" [routerLinkActiveOptions]="{exact: true}" 
         (click)="closeMenu()" class="platform-mobile-item">
        <app-icon name="home" [size]="24" />
        <span>{{ 'header.home' | translate }}</span>
        <app-icon name="chevronRight" [size]="16" class="platform-mobile-chevron" />
      </a>

      @if (headerConfig().showCategories) {
      <button type="button" (click)="navigateToCatalog()" class="platform-mobile-item">
        <app-icon name="layoutGrid" [size]="24" />
        <span>{{ 'header.catalog' | translate }}</span>
        <app-icon name="chevronRight" [size]="16" class="platform-mobile-chevron" />
      </button>
      }

      @for (page of headerPages(); track page.id) {
        <button type="button" (click)="navigateToStatic(page.route)" class="platform-mobile-item">
          <span>{{ page.title }}</span>
          <app-icon name="chevronRight" [size]="16" class="platform-mobile-chevron" />
        </button>
      }

      <div class="platform-mobile-controls">
        @if (headerConfig().showRegion) {
        <div class="platform-mobile-lang">
          <app-region-selector />
        </div>
        }
        @if (headerConfig().showLanguages) {
        <div class="platform-mobile-lang">
          <app-language-selector />
        </div>
        }
      </div>
    </div>