From 1e9ef44b5248f0a6c079835687779beb3ba7d453 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Mon, 4 May 2026 11:29:05 +0200
Subject: [PATCH] feat(header): highlight active nav link with bold + underline

Compares the link href against `$page.url.pathname` (with trailing-slash
normalization + subpath match), applies `font-bold underline` and
`aria-current="page"` on a match. Wired into both the desktop horizontal
nav and the mobile slide-down menu.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/lib/components/Header.svelte | 516 +++++++++++++++++--------------
 1 file changed, 283 insertions(+), 233 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index c11d66f..00549e9 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,250 +1,300 @@
 <script lang="ts">
-  import '$lib/iconify-offline';
-  import { slide } from "svelte/transition";
-  import Icon from "@iconify/svelte";
-  import Search from "./Search.svelte";
-  import { overlayOpen, overlayClose } from "$lib/overlay-store";
-  import { t as tStatic, T } from "$lib/translations";
-  import type { Translations } from "$lib/translations";
+    import "$lib/iconify-offline";
+    import { slide } from "svelte/transition";
+    import Icon from "@iconify/svelte";
+    import Search from "./Search.svelte";
+    import { overlayOpen, overlayClose } from "$lib/overlay-store";
+    import { t as tStatic, T } from "$lib/translations";
+    import type { Translations } from "$lib/translations";
+    import { page } from "$app/stores";
 
-  interface NavLink {
-    href: string;
-    label: string;
-  }
-
-  interface SocialLink {
-    href: string;
-    icon: string;
-    label?: string;
-  }
-
-  let {
-    links = [],
-    socialLinks = [],
-    logoUrl = null,
-    logoSvgHtml = null,
-    translations = {},
-  }: {
-    links?: NavLink[];
-    socialLinks?: SocialLink[];
-    logoUrl?: string | null;
-    logoSvgHtml?: string | null;
-    translations?: Translations | null;
-  } = $props();
-
-  function t(key: string) {
-    return tStatic(translations ?? null, key);
-  }
-  let menuOpen = $state(false);
-  let searchOpen = $state(false);
-
-  function toggleMenu() {
-    if (menuOpen) {
-      menuOpen = false;
-    } else {
-      searchOpen = false;
-      menuOpen = true;
+    function isActiveLink(href: string, pathname: string): boolean {
+        if (!href) return false;
+        const h = href.replace(/\/$/, "") || "/";
+        const p = pathname.replace(/\/$/, "") || "/";
+        if (h === "/") return p === "/";
+        return p === h || p.startsWith(h + "/");
     }
-  }
 
-  function closeMenu() {
-    menuOpen = false;
-  }
+    interface NavLink {
+        href: string;
+        label: string;
+    }
 
-  function closeOverlays() {
-    menuOpen = false;
-    searchOpen = false;
-  }
+    interface SocialLink {
+        href: string;
+        icon: string;
+        label?: string;
+    }
 
-  $effect(() => {
-    if (searchOpen) menuOpen = false;
-  });
-  $effect(() => {
-    if (menuOpen) searchOpen = false;
-  });
-  $effect(() => {
-    if (typeof window === "undefined") return;
-    const open = menuOpen || searchOpen;
-    overlayOpen.set(open);
-    overlayClose.set(open ? closeOverlays : null);
-  });
-  $effect(() => {
-    if (typeof window === "undefined") return;
-    const open = menuOpen || searchOpen;
-    if (open) window.scrollTo({ top: 0, behavior: "smooth" });
-    document.documentElement.style.overflow = open ? "hidden" : "";
-    document.body.style.overflow = open ? "hidden" : "";
-    return () => {
-      document.documentElement.style.overflow = "";
-      document.body.style.overflow = "";
-    };
-  });
-  $effect(() => {
-    if (!menuOpen) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") closeMenu();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  });
+    let {
+        links = [],
+        socialLinks = [],
+        logoUrl = null,
+        logoSvgHtml = null,
+        translations = {},
+    }: {
+        links?: NavLink[];
+        socialLinks?: SocialLink[];
+        logoUrl?: string | null;
+        logoSvgHtml?: string | null;
+        translations?: Translations | null;
+    } = $props();
+
+    function t(key: string) {
+        return tStatic(translations ?? null, key);
+    }
+    let menuOpen = $state(false);
+    let searchOpen = $state(false);
+
+    function toggleMenu() {
+        if (menuOpen) {
+            menuOpen = false;
+        } else {
+            searchOpen = false;
+            menuOpen = true;
+        }
+    }
+
+    function closeMenu() {
+        menuOpen = false;
+    }
+
+    function closeOverlays() {
+        menuOpen = false;
+        searchOpen = false;
+    }
+
+    $effect(() => {
+        if (searchOpen) menuOpen = false;
+    });
+    $effect(() => {
+        if (menuOpen) searchOpen = false;
+    });
+    $effect(() => {
+        if (typeof window === "undefined") return;
+        const open = menuOpen || searchOpen;
+        overlayOpen.set(open);
+        overlayClose.set(open ? closeOverlays : null);
+    });
+    $effect(() => {
+        if (typeof window === "undefined") return;
+        const open = menuOpen || searchOpen;
+        if (open) window.scrollTo({ top: 0, behavior: "smooth" });
+        document.documentElement.style.overflow = open ? "hidden" : "";
+        document.body.style.overflow = open ? "hidden" : "";
+        return () => {
+            document.documentElement.style.overflow = "";
+            document.body.style.overflow = "";
+        };
+    });
+    $effect(() => {
+        if (!menuOpen) return;
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") closeMenu();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    });
 </script>
 
 <header
-  id="horizontal-navigation"
-  class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-linear-to-br from-stein-50 from-0% via-wald-100/90 via-42% to-himmel-100 to-100%"
+    id="horizontal-navigation"
+    class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-wald-50"
 >
-  <div class="flex items-center justify-between container-custom py-2">
-    <a
-      href="/"
-      aria-label={t(T.site_name_fallback)}
-      class="logo flex items-center origin-left font-bold text-lg tracking-wide hover:scale-[1.12] transition-transform duration-200 ease-out relative"
-    >
-      {#if logoSvgHtml}
-        <span class="logo-svg h-10 w-auto inline-flex items-center text-inherit [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-10" aria-hidden="true">{@html logoSvgHtml}</span>
-      {:else if logoUrl && logoUrl.trim() !== ""}
-        <img src={logoUrl} alt="" class="h-10 w-auto object-contain" />
-      {:else}
-        <span>{t(T.site_name_fallback)}</span>
-      {/if}
-    </a>
-
-    <!-- Desktop: horizontale Nav (ab lg) -->
-    <nav
-      class="hidden lg:flex items-center gap-4"
-      aria-label={t(T.header_nav_aria)}
-    >
-      {#each links as link}
+    <div class="flex items-center justify-between container-custom py-2">
         <a
-          href={link.href}
-          class="hover:animate-pulse transition-all text-xs tracking-wide"
+            href="/"
+            aria-label={t(T.site_name_fallback)}
+            class="logo flex items-center origin-left font-bold text-lg tracking-wide hover:scale-[1.12] transition-transform duration-200 ease-out relative"
         >
-          {link.label}
+            {#if logoSvgHtml}
+                <span
+                    class="logo-svg h-10 w-auto inline-flex items-center text-inherit [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-10"
+                    aria-hidden="true">{@html logoSvgHtml}</span
+                >
+            {:else if logoUrl && logoUrl.trim() !== ""}
+                <img src={logoUrl} alt="" class="h-10 w-auto object-contain" />
+            {:else}
+                <span>{t(T.site_name_fallback)}</span>
+            {/if}
         </a>
-      {/each}
-      <div class="w-1 h-4"></div>
-      {#each socialLinks as social}
-        <a
-          href={social.href}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="p-1.5 -m-1.5 rounded-md transition-colors flex items-center justify-center"
-          aria-label={social.label || t(T.header_social_aria)}
+
+        <!-- Desktop: horizontale Nav (ab lg) -->
+        <nav
+            class="hidden lg:flex items-center gap-4"
+            aria-label={t(T.header_nav_aria)}
         >
-          <Icon icon={social.icon} aria-hidden="true" />
-        </a>
-      {/each}
-      <button
-        type="button"
-        class="p-2 -mr-2 rounded-md transition-colors flex items-center justify-center"
-        aria-label={searchOpen
-          ? t(T.header_search_close)
-          : t(T.header_search_open)}
-        aria-expanded={searchOpen}
-        aria-controls="search-panel"
-        onclick={() => (searchOpen = !searchOpen)}
-      >
-        {#if searchOpen}
-          <Icon icon="mdi:close" class="text-error!" aria-hidden="true" />
-        {:else}
-          <Icon icon="mdi:magnify" aria-hidden="true" />
-        {/if}
-      </button>
-    </nav>
-
-    <!-- Mobile: Such- und Burger-Buttons (unter lg) -->
-    <div class="lg:hidden flex items-center gap-1">
-      <button
-        type="button"
-        class="p-2 rounded-md transition-colors flex items-center justify-center"
-        aria-label={searchOpen
-          ? t(T.header_search_close)
-          : t(T.header_search_open)}
-        aria-expanded={searchOpen}
-        aria-controls="search-panel"
-        onclick={() => (searchOpen = !searchOpen)}
-      >
-        {#if searchOpen}
-          <Icon
-            icon="mdi:close"
-            class="text-2xl text-error!"
-            aria-hidden="true"
-          />
-        {:else}
-          <Icon
-            icon="mdi:magnify"
-            class="text-2xl"
-            aria-hidden="true"
-          />
-        {/if}
-      </button>
-      <button
-        type="button"
-        class="p-2 -mr-2 hover:bg-stein-0/10 rounded-md transition-colors flex items-center justify-center"
-        aria-label={menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}
-        aria-controls={menuOpen ? "mobile-nav" : undefined}
-        aria-expanded={menuOpen}
-        onclick={toggleMenu}
-      >
-        <span class="sr-only"
-          >{menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}</span
-        >
-        {#if menuOpen}
-          <Icon icon="mdi:close" class="text-2xl" aria-hidden="true" />
-        {:else}
-          <Icon icon="mdi:menu" class="text-2xl" aria-hidden="true" />
-        {/if}
-      </button>
-    </div>
-  </div>
-
-  <Search bind:open={searchOpen} />
-
-  <!-- Mobile: Dropdown-Menü (unter lg) -->
-  {#if menuOpen}
-    <div
-      id="mobile-nav"
-      class="lg:hidden border-t border-stein-0/10 bg-stein-900/98 backdrop-blur overflow-hidden"
-      role="dialog"
-      aria-label="Navigation"
-      in:slide={{ duration: 200 }}
-      out:slide={{ duration: 150 }}
-    >
-      <nav
-        class="container-custom py-4 flex flex-col gap-1"
-        aria-label={t(T.header_nav_aria)}
-      >
-        {#each links as link}
-          <a
-            href={link.href}
-            class="block py-3 px-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors text-sm"
-            onclick={closeMenu}
-          >
-            {link.label}
-          </a>
-        {/each}
-        {#if socialLinks.length > 0}
-          <div
-            class="flex flex-wrap gap-2 pt-2 mt-2 border-t border-stein-0/10"
-          >
-            {#each socialLinks as social}
-              <a
-                href={social.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex p-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors"
-                aria-label={social.label || t(T.header_social_aria)}
-                onclick={closeMenu}
-              >
-                <Icon
-                  icon={social.icon}
-                  class="text-[1.5rem]"
-                  aria-hidden="true"
-                />
-              </a>
+            {#each links as link}
+                <a
+                    href={link.href}
+                    class="hover:animate-pulse transition-all text-[.7rem]"
+                    class:font-bold={isActiveLink(
+                        link.href,
+                        $page.url.pathname,
+                    )}
+                    class:underline={isActiveLink(
+                        link.href,
+                        $page.url.pathname,
+                    )}
+                    aria-current={isActiveLink(link.href, $page.url.pathname)
+                        ? "page"
+                        : undefined}
+                >
+                    {link.label}
+                </a>
             {/each}
-          </div>
-        {/if}
-      </nav>
+            <div class="w-1 h-4"></div>
+            {#each socialLinks as social}
+                <a
+                    href={social.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="p-1.5 -m-1.5 rounded-md transition-colors flex items-center justify-center"
+                    aria-label={social.label || t(T.header_social_aria)}
+                >
+                    <Icon icon={social.icon} aria-hidden="true" />
+                </a>
+            {/each}
+            <button
+                type="button"
+                class="p-2 -mr-2 rounded-md transition-colors flex items-center justify-center"
+                aria-label={searchOpen
+                    ? t(T.header_search_close)
+                    : t(T.header_search_open)}
+                aria-expanded={searchOpen}
+                aria-controls="search-panel"
+                onclick={() => (searchOpen = !searchOpen)}
+            >
+                {#if searchOpen}
+                    <Icon
+                        icon="mdi:close"
+                        class="text-error!"
+                        aria-hidden="true"
+                    />
+                {:else}
+                    <Icon icon="mdi:magnify" aria-hidden="true" />
+                {/if}
+            </button>
+        </nav>
+
+        <!-- Mobile: Such- und Burger-Buttons (unter lg) -->
+        <div class="lg:hidden flex items-center gap-1">
+            <button
+                type="button"
+                class="p-2 rounded-md transition-colors flex items-center justify-center"
+                aria-label={searchOpen
+                    ? t(T.header_search_close)
+                    : t(T.header_search_open)}
+                aria-expanded={searchOpen}
+                aria-controls="search-panel"
+                onclick={() => (searchOpen = !searchOpen)}
+            >
+                {#if searchOpen}
+                    <Icon
+                        icon="mdi:close"
+                        class="text-2xl text-error!"
+                        aria-hidden="true"
+                    />
+                {:else}
+                    <Icon
+                        icon="mdi:magnify"
+                        class="text-2xl"
+                        aria-hidden="true"
+                    />
+                {/if}
+            </button>
+            <button
+                type="button"
+                class="p-2 -mr-2 hover:bg-stein-0/10 rounded-md transition-colors flex items-center justify-center"
+                aria-label={menuOpen
+                    ? t(T.header_menu_close)
+                    : t(T.header_menu_open)}
+                aria-controls={menuOpen ? "mobile-nav" : undefined}
+                aria-expanded={menuOpen}
+                onclick={toggleMenu}
+            >
+                <span class="sr-only"
+                    >{menuOpen
+                        ? t(T.header_menu_close)
+                        : t(T.header_menu_open)}</span
+                >
+                {#if menuOpen}
+                    <Icon
+                        icon="mdi:close"
+                        class="text-2xl"
+                        aria-hidden="true"
+                    />
+                {:else}
+                    <Icon icon="mdi:menu" class="text-2xl" aria-hidden="true" />
+                {/if}
+            </button>
+        </div>
     </div>
-  {/if}
+
+    <Search bind:open={searchOpen} />
+
+    <!-- Mobile: Dropdown-Menü (unter lg) -->
+    {#if menuOpen}
+        <div
+            id="mobile-nav"
+            class="lg:hidden border-t border-stein-0/10 bg-stein-900/98 backdrop-blur overflow-hidden"
+            role="dialog"
+            aria-label="Navigation"
+            in:slide={{ duration: 200 }}
+            out:slide={{ duration: 150 }}
+        >
+            <nav
+                class="container-custom py-4 flex flex-col gap-1"
+                aria-label={t(T.header_nav_aria)}
+            >
+                {#each links as link}
+                    <a
+                        href={link.href}
+                        class="block py-3 px-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors text-sm"
+                        class:font-bold={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )}
+                        class:underline={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )}
+                        aria-current={isActiveLink(
+                            link.href,
+                            $page.url.pathname,
+                        )
+                            ? "page"
+                            : undefined}
+                        onclick={closeMenu}
+                    >
+                        {link.label}
+                    </a>
+                {/each}
+                {#if socialLinks.length > 0}
+                    <div
+                        class="flex flex-wrap gap-2 pt-2 mt-2 border-t border-stein-0/10"
+                    >
+                        {#each socialLinks as social}
+                            <a
+                                href={social.href}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex p-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors"
+                                aria-label={social.label ||
+                                    t(T.header_social_aria)}
+                                onclick={closeMenu}
+                            >
+                                <Icon
+                                    icon={social.icon}
+                                    class="text-[1.5rem]"
+                                    aria-hidden="true"
+                                />
+                            </a>
+                        {/each}
+                    </div>
+                {/if}
+            </nav>
+        </div>
+    {/if}
 </header>