qr_vitanova/src/app/site-header/site-header.html

<header class="site-header">
  <div class="site-header__inner">

    <!-- Brand -->
    <a class="site-header__brand" routerLink="/" (click)="closeMenu()">
      <img src="/logo_small.png" alt="fastCHECK" width="32" height="32" />
      <span class="site-header__wordmark">
        <span class="wm-fast">fast</span><span class="wm-check">CHECK</span>
      </span>
    </a>

    <!-- Desktop nav -->
    <nav class="site-header__nav" [attr.aria-label]="'header.aria_nav' | translate">
      <a class="site-header__link" href="#about">{{ 'header.nav_about' | translate }}</a>
      <a class="site-header__link" href="#contacts">{{ 'header.nav_contacts' | translate }}</a>
      <a class="site-header__link" href="mailto:info@viaexport.store">{{ 'header.nav_support' | translate }}</a>
    </nav>

    <!-- Language switcher -->
    <div class="site-header__langs">
      <button type="button" class="site-header__lang" [class.site-header__lang--active]="currentLang() === 'ru'" (click)="setLang('ru')">RU</button>
      <button type="button" class="site-header__lang" [class.site-header__lang--active]="currentLang() === 'en'" (click)="setLang('en')">EN</button>
      <button type="button" class="site-header__lang" [class.site-header__lang--active]="currentLang() === 'hy'" (click)="setLang('hy')">HY</button>
    </div>

    <!-- Mobile hamburger -->
    <button class="site-header__burger" type="button"
            [attr.aria-expanded]="menuOpen()"
            [attr.aria-label]="'header.aria_burger' | translate"
            (click)="toggleMenu()">
      @if (menuOpen()) {
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.5" stroke-linecap="round">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      } @else {
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.5" stroke-linecap="round">
          <line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/>
        </svg>
      }
    </button>
  </div>

  <!-- Mobile dropdown -->
  @if (menuOpen()) {
    <nav class="site-header__mobile-menu" (click)="closeMenu()" [attr.aria-label]="'header.aria_menu' | translate">
      <a class="site-header__mobile-link" href="#about">{{ 'header.nav_about' | translate }}</a>
      <a class="site-header__mobile-link" href="#contacts">{{ 'header.nav_contacts' | translate }}</a>
      <a class="site-header__mobile-link" href="mailto:info@viaexport.store">{{ 'header.nav_support' | translate }}</a>
      <div class="site-header__mobile-langs">
        <button type="button" class="site-header__lang" [class.site-header__lang--active]="currentLang() === 'ru'" (click)="setLang('ru')">RU</button>
        <button type="button" class="site-header__lang" [class.site-header__lang--active]="currentLang() === 'en'" (click)="setLang('en')">EN</button>
        <button type="button" class="site-header__lang" [class.site-header__lang--active]="currentLang() === 'hy'" (click)="setLang('hy')">HY</button>
      </div>
    </nav>
  }
</header>