Alexander Bocken
2b76b47083
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
22 lines
772 B
Svelte
22 lines
772 B
Svelte
<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" 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>
|
|
</Header>
|