<mat-toolbar class="!flex !items-center !p-[clamp(0.5rem,1vw,1rem)] !backdrop-blur-[8px] !backdrop-saturate-[1.1] !bg-white/80 dark:!bg-[#313131]/80 !border-b !border-black/[.08]" color="primary" (keydown)="onKeydown($event)">
  <a class="flex items-center gap-[clamp(0.4rem,1vw,0.6rem)] text-inherit no-underline" routerLink="/">
    <img class="w-[clamp(36px,10vw,48px)] h-[clamp(36px,10vw,48px)] rounded-full" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
      oncontextmenu="return false;">
    <span class="font-semibold tracking-[0.2px] text-[clamp(1rem,3vw,1.2rem)]">{{ 'APP.TITLE' | translate }}</span>
  </a>

  <nav class="absolute left-1/2 -translate-x-1/2 flex gap-[clamp(0.25rem,1vw,0.5rem)] justify-center mobile:hidden">
    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
       [routerLink]="RouterConstants.ABOUT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
       [routerLink]="RouterConstants.PROJECTS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
       [routerLink]="RouterConstants.ALGORITHMS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
       [routerLink]="RouterConstants.IMPRINT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
  </nav>

  <!-- Mobile nav menu button -->
  <button mat-icon-button class="hidden mobile:inline-flex" [matMenuTriggerFor]="navMenu" aria-label="Open navigation">
    <mat-icon>menu</mat-icon>
  </button>

  <span class="flex-1"></span>

  <!-- Mobile nav menu -->
  <mat-menu #navMenu="matMenu" xPosition="before">
    <button mat-menu-item [routerLink]="RouterConstants.ABOUT.LINK">
      {{ 'TOPBAR.ABOUT' | translate }}
    </button>
    <button mat-menu-item [routerLink]="RouterConstants.PROJECTS.LINK">
      {{ 'TOPBAR.PROJECTS' | translate }}
    </button>
    <button mat-menu-item [routerLink]="RouterConstants.ALGORITHMS.LINK">
      {{ 'TOPBAR.ALGORITHMS' | translate }}
    </button>
    <button mat-menu-item [routerLink]="RouterConstants.IMPRINT.LINK">
      {{ 'TOPBAR.IMPRINT' | translate }}
    </button>
  </mat-menu>

  <span class="flex-1"></span>

  <!-- Settings: Sprache + Theme -->
  <button mat-icon-button [matMenuTriggerFor]="settingsMenu" aria-label="Open settings"
    matTooltip="{{ 'TOPBAR.SETTINGS' | translate }}">
    <mat-icon>tune</mat-icon>
  </button>

  <mat-menu #settingsMenu="matMenu" xPosition="before">
    <div class="menu-section">
      <div class="menu-title">{{ 'TOPBAR.LANGUAGE' | translate }}</div>
      <button mat-menu-item (click)="setLang('de')">
        <img class="flag-icon" src="{{AssetsConstants.FLAG_DE}}" alt="" aria-hidden="true">
        <span>{{ 'LANG.DE' | translate }}</span>
        @if (lang.lang() === 'de')
        {
        <mat-icon>check</mat-icon>
        }
      </button>
      <button mat-menu-item (click)="setLang('en')">
        <img class="flag-icon" src="{{AssetsConstants.FLAG_EN}}" alt="" aria-hidden="true">
        <span>{{ 'LANG.EN' | translate }}</span>
        @if (lang.lang() === 'en')
        {
        <mat-icon>check</mat-icon>
        }
      </button>
    </div>
    <mat-divider></mat-divider>
    <div class="menu-section">
      <div class="menu-title">{{ 'TOPBAR.APPEARANCE' | translate }}</div>
      <button mat-menu-item (click)="theme.toggle()">
        <mat-icon>{{ themeIcon() }}</mat-icon>
        <span>
          {{ theme.theme() === 'dark' ? ('THEME.LIGHT' | translate) : ('THEME.DARK' | translate) }}
        </span>
        <span class="kbd">Ctrl/⌘ + J</span>
      </button>
    </div>
  </mat-menu>
</mat-toolbar>
