improve header navigation styling and active link highlighting

Optimize header link spacing and add visual feedback for active pages: - Reduce link padding and gap for more compact navigation - Shorten German labels: "In Saison" to "Saison", "Stichwörter" to "Tags" - Remove "Tipps" section from navigation menu Add active page highlighting across all layouts: - Highlight current page links in red (matching hover color) - Desktop: animated red underline that smoothly slides between links - Mobile: static red underline for active links in hamburger menu - Underline aligns precisely with text width (excludes padding) Improve transitions: - Fix color transition to only animate color, not layout properties - Disable underline transition during window resize to prevent lag - Underline updates immediately on resize for perfect alignment
2025-12-27 10:15:16 +01:00
parent 51b0928489
commit 2b76b47083
4 changed files with 135 additions and 26 deletions
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,8 +1,13 @@
 <script>
 import "$lib/css/nordtheme.css"
 import { onMount } from "svelte";
+import { page } from '$app/stores';
 import Symbol from "./Symbol.svelte"

+let underlineLeft = $state(0);
+let underlineWidth = $state(0);
+let disableTransition = $state(false);
+
 function toggle_sidebar(state){
 	// state: force hidden state (optional)
 	const nav_el = document.querySelector("nav")
@@ -10,11 +15,61 @@ function toggle_sidebar(state){
 	else nav_el.hidden = state
 }

+function updateUnderline() {
+	const activeLink = document.querySelector('.site_header a.active');
+	const linksWrapper = document.querySelector('.links-wrapper');
+
+	if (activeLink && linksWrapper) {
+		const wrapperRect = linksWrapper.getBoundingClientRect();
+		const linkRect = activeLink.getBoundingClientRect();
+
+		// Get computed padding to exclude from width and adjust position
+		const computedStyle = window.getComputedStyle(activeLink);
+		const paddingLeft = parseFloat(computedStyle.paddingLeft);
+		const paddingRight = parseFloat(computedStyle.paddingRight);
+
+		underlineLeft = linkRect.left - wrapperRect.left + paddingLeft;
+		underlineWidth = linkRect.width - paddingLeft - paddingRight;
+	} else {
+		underlineWidth = 0;
+	}
+}
+
+// Update underline when page changes
+$effect(() => {
+	$page.url.pathname; // Subscribe to pathname changes
+	// Use setTimeout to ensure DOM has updated
+	setTimeout(updateUnderline, 0);
+});
+
 onMount( () => {
-const link_els = document.querySelectorAll("nav a")
-link_els.forEach((el) => {
-	el.addEventListener("click", () => {toggle_sidebar(true)});
-})
+	const link_els = document.querySelectorAll("nav a")
+	link_els.forEach((el) => {
+		el.addEventListener("click", () => {toggle_sidebar(true)});
+	})
+
+	// Initialize underline position
+	updateUnderline();
+
+	// Update underline on resize, with transition disabled
+	let resizeTimer;
+	function handleResize() {
+		disableTransition = true;
+		updateUnderline(); // Update immediately to prevent lag
+
+		clearTimeout(resizeTimer);
+		resizeTimer = setTimeout(() => {
+			// Re-enable transition after resize has settled
+			disableTransition = false;
+		}, 150);
+	}
+
+	window.addEventListener('resize', handleResize);
+
+	return () => {
+		window.removeEventListener('resize', handleResize);
+		clearTimeout(resizeTimer);
+	};
 })

 </script>
@@ -39,7 +94,7 @@ nav[hidden]{
 :global(a.entry)
 {
 	list-style-type:none;
-	transition: 100ms;
+	transition: color 100ms;
 	color: white;
 	user-select: none;
 }
@@ -51,11 +106,12 @@ nav[hidden]{
 	font-size: 1.2rem;
 	color: inherit;
 	border-radius: 1000px;
-	padding: 0.5rem 1rem;
+	padding: 0.5rem 0.75rem;
 }

 :global(.site_header li:hover),
 :global(.site_header li:focus-within),
+:global(.site_header li:has(a.active)),
 :global(.entry:hover),
 :global(.entry:focus-visible)
 {
@@ -66,12 +122,27 @@ nav[hidden]{
 	padding-block: 1.5rem;
 	display: flex;
 	flex-direction: row;
-	gap: 1rem;
+	gap: 0.5rem;
 	justify-content: space-evenly;
 	max-width: 1000px;
 	margin: 0;
 	margin-inline: auto;
 }
+.links-wrapper {
+	position: relative;
+	flex: 1;
+}
+.active-underline {
+	position: absolute;
+	bottom: 1.2rem;
+	height: 2px;
+	background-color: var(--red);
+	transition: left 300ms ease-out, width 300ms ease-out;
+	pointer-events: none;
+}
+.active-underline.no-transition {
+	transition: none;
+}
 .nav_button{
 	display: none;
 }
@@ -158,7 +229,7 @@ footer{
 		height: 100vh; /* dvh does not work, breaks because of transition and only being applied after scroll ends*/
 		margin-bottom: 50vh;
 		width: min(95svw, 25em);
-		transition: 100ms;
+		transition: transform 100ms;
 		z-index: 10;
 		flex-direction: column;
 		justify-content: flex-start !important;
@@ -199,6 +270,15 @@ footer{
 	.language-selector-desktop{
 		display: none;
 	}
+	.active-underline {
+		display: none;
+	}
+	:global(.nav_site .site_header a.active) {
+		text-decoration: underline;
+		text-decoration-color: var(--red);
+		text-decoration-thickness: 2px;
+		text-underline-offset: 0.3rem;
+	}
 }
 </style>
 <div class=wrapper lang=de>
@@ -213,7 +293,10 @@ footer{
 </div>
 <nav hidden class=nav_site>
 	<a class=entry href="/"><Symbol></Symbol></a>
-	<slot name=links></slot>
+	<div class="links-wrapper">
+		<slot name=links></slot>
+		<div class="active-underline" class:no-transition={disableTransition} style="left: {underlineLeft}px; width: {underlineWidth}px;"></div>
+	</div>
 	<div class="header-right">
 		<div class="language-selector-desktop">
 			<slot name=language_selector_desktop></slot>
--- a/src/routes/[recipeLang=recipeLang]/+layout.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+import { page } from '$app/stores';
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
 import LanguageSelector from '$lib/components/LanguageSelector.svelte';
@@ -10,25 +11,33 @@ const isEnglish = $derived(data.lang === 'en');
 const labels = $derived({
 	allRecipes: isEnglish ? 'All Recipes' : 'Alle Rezepte',
 	favorites: isEnglish ? 'Favorites' : 'Favoriten',
-	inSeason: isEnglish ? 'In Season' : 'In Saison',
+	inSeason: isEnglish ? 'In Season' : 'Saison',
 	category: isEnglish ? 'Category' : 'Kategorie',
 	icon: 'Icon',
-	keywords: isEnglish ? 'Keywords' : 'Stichwörter',
-	tips: isEnglish ? 'Tips' : 'Tipps'
+	keywords: isEnglish ? 'Keywords' : 'Tags'
 });
+
+function isActive(path) {
+	const currentPath = $page.url.pathname;
+	// Exact match for recipe lang root
+	if (path === `/${data.recipeLang}`) {
+		return currentPath === `/${data.recipeLang}` || currentPath === `/${data.recipeLang}/`;
+	}
+	// For other paths, check if current path starts with the link path
+	return currentPath.startsWith(path);
+}
 </script>

 <Header>
 	<ul class=site_header slot=links>
-	<li><a href="/{data.recipeLang}">{labels.allRecipes}</a></li>
+	<li><a href="/{data.recipeLang}" class:active={isActive(`/${data.recipeLang}`)}>{labels.allRecipes}</a></li>
 	{#if user}
-		<li><a href="/{data.recipeLang}/favorites">{labels.favorites}</a></li>
+		<li><a href="/{data.recipeLang}/favorites" class:active={isActive(`/${data.recipeLang}/favorites`)}>{labels.favorites}</a></li>
 	{/if}
-	<li><a href="/{data.recipeLang}/season">{labels.inSeason}</a></li>
-	<li><a href="/{data.recipeLang}/category">{labels.category}</a></li>
-	<li><a href="/{data.recipeLang}/icon">{labels.icon}</a></li>
-	<li><a href="/{data.recipeLang}/tag">{labels.keywords}</a></li>
-	<li><a href="/rezepte/tips-and-tricks">{labels.tips}</a></li>
+	<li><a href="/{data.recipeLang}/season" class:active={isActive(`/${data.recipeLang}/season`)}>{labels.inSeason}</a></li>
+	<li><a href="/{data.recipeLang}/category" class:active={isActive(`/${data.recipeLang}/category`)}>{labels.category}</a></li>
+	<li><a href="/{data.recipeLang}/icon" class:active={isActive(`/${data.recipeLang}/icon`)}>{labels.icon}</a></li>
+	<li><a href="/{data.recipeLang}/tag" class:active={isActive(`/${data.recipeLang}/tag`)}>{labels.keywords}</a></li>
 	</ul>
 	<LanguageSelector slot=language_selector_mobile />
 	<LanguageSelector slot=language_selector_desktop />
--- a/src/routes/cospend/+layout.svelte
+++ b/src/routes/cospend/+layout.svelte
@@ -44,13 +44,23 @@
      window.dispatchEvent(new CustomEvent('dashboardRefresh'));
    }
  }
+
+  function isActive(path) {
+    const currentPath = $page.url.pathname;
+    // Exact match for cospend root
+    if (path === '/cospend') {
+      return currentPath === '/cospend' || currentPath === '/cospend/';
+    }
+    // For other paths, check if current path starts with the link path
+    return currentPath.startsWith(path);
+  }
 </script>

 <Header>
  <ul class="site_header" slot="links">
-    <li><a href="/cospend">Dashboard</a></li>
-    <li><a href="/cospend/payments">All Payments</a></li>
-    <li><a href="/cospend/recurring">Recurring Payments</a></li>
+    <li><a href="/cospend" class:active={isActive('/cospend')}>Dashboard</a></li>
+    <li><a href="/cospend/payments" class:active={isActive('/cospend/payments')}>All Payments</a></li>
+    <li><a href="/cospend/recurring" class:active={isActive('/cospend/recurring')}>Recurring Payments</a></li>
  </ul>
  <UserHeader slot="right_side" {user}></UserHeader>
  
--- a/src/routes/glaube/+layout.svelte
+++ b/src/routes/glaube/+layout.svelte
@@ -1,13 +1,20 @@
 <script>
+import { page } from '$app/stores';
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
 export let data
+
+function isActive(path) {
+	const currentPath = $page.url.pathname;
+	// Check if current path starts with the link path
+	return currentPath.startsWith(path);
+}
 </script>
 <Header>
 	<ul class=site_header slot=links>
-	<li><a href="/glaube/gebete">Gebete</a></li>
-	<li><a href="/glaube/rosenkranz">Rosenkranz</a></li>
-	<li><a href="/glaube/predigten">Predigten</a></li>
+	<li><a href="/glaube/gebete" class:active={isActive('/glaube/gebete')}>Gebete</a></li>
+	<li><a href="/glaube/rosenkranz" class:active={isActive('/glaube/rosenkranz')}>Rosenkranz</a></li>
+	<li><a href="/glaube/predigten" class:active={isActive('/glaube/predigten')}>Predigten</a></li>
 	</ul>
 	<UserHeader user={data.session?.user} slot=right_side></UserHeader>
 	<slot></slot>