Toju/website/src/app/components/header/header.component.html

<header
  class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
  [class]="scrolled() ? 'glass shadow-lg shadow-black/20' : 'bg-transparent'"
>
  <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
    <!-- Logo -->
    <a
      routerLink="/"
      aria-label="Toju home"
      class="flex items-center group"
    >
      <span class="flex items-center gap-1.5">
        <img
          src="/images/toju-logo-transparent.png"
          alt="Toju"
          class="h-9 w-auto object-contain drop-shadow-lg group-hover:opacity-90 transition-opacity"
        />
        <span class="text-xl font-bold text-foreground">Toju</span>
      </span>
      <span
        class="ml-2 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-purple-500/20 text-purple-400 border border-purple-500/30 uppercase tracking-wider"
      >
        Beta
      </span>
    </a>

    <!-- Desktop nav -->
    <div class="hidden md:flex items-center gap-8">
      <a
        routerLink="/"
        routerLinkActive="text-primary"
        [routerLinkActiveOptions]="{ exact: true }"
        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
      >
        Home
      </a>
      <a
        routerLink="/what-is-toju"
        routerLinkActive="text-primary"
        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
      >
        What is Toju?
      </a>
      <a
        routerLink="/downloads"
        routerLinkActive="text-primary"
        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
      >
        Downloads
      </a>
      <a
        routerLink="/philosophy"
        routerLinkActive="text-primary"
        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
      >
        Our Philosophy
      </a>
    </div>

    <!-- Right side -->
    <div class="hidden md:flex items-center gap-4">
      <a
        href="https://buymeacoffee.com/myxelium"
        target="_blank"
        rel="noopener noreferrer"
        class="text-sm text-muted-foreground hover:text-yellow-400 transition-colors flex items-center gap-1.5"
      >
        <img
          src="/images/buymeacoffee.png"
          alt=""
          width="16"
          height="16"
          class="w-4 h-4 object-contain"
        />
        Support Us
      </a>
      <a
        href="https://web.toju.app/"
        target="_blank"
        rel="noopener"
        class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40"
      >
        Use Web Version
        <svg
          class="w-4 h-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
          />
        </svg>
      </a>
    </div>

    <!-- Mobile hamburger -->
    <button
      type="button"
      class="md:hidden text-foreground p-2"
      (click)="mobileOpen.set(!mobileOpen())"
      aria-label="Toggle menu"
    >
      <svg
        class="w-6 h-6"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        @if (mobileOpen()) {
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        } @else {
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          />
        }
      </svg>
    </button>
  </nav>

  <!-- Mobile nav -->
  @if (mobileOpen()) {
    <div
      class="md:hidden glass border-t border-border/30 px-6 py-4 space-y-4"
      (click)="mobileOpen.set(false)"
    >
      <a
        routerLink="/"
        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
        >Home</a
      >
      <a
        routerLink="/what-is-toju"
        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
        >What is Toju?</a
      >
      <a
        routerLink="/downloads"
        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
        >Downloads</a
      >
      <a
        routerLink="/philosophy"
        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
        >Our Philosophy</a
      >
      <hr class="border-border/30" />
      <a
        href="https://buymeacoffee.com/myxelium"
        target="_blank"
        rel="noopener noreferrer"
        class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-yellow-400 transition-colors"
      >
        <img
          src="/images/buymeacoffee.png"
          alt=""
          width="16"
          height="16"
          class="w-4 h-4 object-contain"
        />
        Support Us
      </a>
      <a
        href="https://web.toju.app/"
        target="_blank"
        rel="noopener"
        class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium"
      >
        Use Web Version
      </a>
    </div>
  }
</header>