admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(header): highlight active nav link with bold + underline
Deploy / verify (push) Successful in 45s
Details
Deploy / deploy (push) Successful in 1m9s
Details

Browse Source 
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>
This commit is contained in:
Peter Meier
2026-05-04 11:29:05 +02:00
parent 5cf141fa4a
commit 1e9ef44b52
1 changed files with 283 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Header.svelte
+59 -9
View File
@@ -1,11 +1,20 @@
<script lang="ts">
import '$lib/iconify-offline';
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";
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 + "/");
}
interface NavLink {
href: string;
@@ -91,7 +100,7 @@
<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%"
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
@@ -100,7 +109,10 @@
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>
<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}
@@ -116,7 +128,18 @@
{#each links as link}
<a
href={link.href}
class="hover:animate-pulse transition-all text-xs tracking-wide"
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>
@@ -144,7 +167,11 @@
onclick={() => (searchOpen = !searchOpen)}
>
{#if searchOpen}
<Icon icon="mdi:close" class="text-error!" aria-hidden="true" />
<Icon
icon="mdi:close"
class="text-error!"
aria-hidden="true"
/>
{:else}
<Icon icon="mdi:magnify" aria-hidden="true" />
{/if}
@@ -180,16 +207,24 @@
<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-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
>{menuOpen
? t(T.header_menu_close)
: t(T.header_menu_open)}</span
>
{#if menuOpen}
<Icon icon="mdi:close" class="text-2xl" aria-hidden="true" />
<Icon
icon="mdi:close"
class="text-2xl"
aria-hidden="true"
/>
{:else}
<Icon icon="mdi:menu" class="text-2xl" aria-hidden="true" />
{/if}
@@ -217,6 +252,20 @@
<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}
@@ -232,7 +281,8 @@
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)}
aria-label={social.label ||
t(T.header_social_aria)}
onclick={closeMenu}
>
<Icon