Release 0.1.1

src/routes/+layout.svelte

@@ -6,13 +6,14 @@
 	import ThemeToggle from '#lib/components/ThemeToggle.svelte';
 
 	let { children } = $props();
-	const navigation = [
+	const primaryNavigation = [
 		{ href: '/eingang', label: 'Eingang', icon: 'inbox' },
 		{ href: '/fundus', label: 'Fundus', icon: 'library' },
 		{ href: '/sendungen', label: 'Sendungen', icon: 'shows' },
-		{ href: '/archiv', label: 'Archiv', icon: 'archive' },
-		{ href: '/verwaltung', label: 'Verwaltung', icon: 'settings' }
+		{ href: '/archiv', label: 'Archiv', icon: 'archive' }
 	] as const;
+	const administration = { href: '/verwaltung', label: 'Verwaltung', icon: 'settings' } as const;
+	const mobileNavigation = [...primaryNavigation, administration];
 
 	function isActive(href: string) {
 		return (
@@ -36,7 +37,7 @@
 		</a>
 
 		<nav class="main-navigation" aria-label="Hauptnavigation">
-			{#each navigation as item (item.href)}
+			{#each primaryNavigation as item (item.href)}
 				<a
 					href={resolve(item.href)}
 					class:active={isActive(item.href)}
@@ -49,11 +50,17 @@
 		</nav>
 
 		<div class="sidebar-footer">
+			<nav class="utility-navigation" aria-label="Verwaltung">
+				<a
+					href={resolve(administration.href)}
+					class:active={isActive(administration.href)}
+					aria-current={isActive(administration.href) ? 'page' : undefined}
+				>
+					<NavIcon name={administration.icon} />
+					<span>{administration.label}</span>
+				</a>
+			</nav>
 			<ThemeToggle />
-			<div class="stage-indicator">
-				<span></span>
-				<div><strong>Etappe 1</strong><small>Lokaler Entwurf</small></div>
-			</div>
 		</div>
 	</aside>
 
@@ -68,7 +75,7 @@
 	<main id="main-content">{@render children()}</main>
 
 	<nav class="mobile-navigation" aria-label="Hauptnavigation">
-		{#each navigation as item (item.href)}
+		{#each mobileNavigation as item (item.href)}
 			<a
 				href={resolve(item.href)}
 				class:active={isActive(item.href)}