Refactor navigation structure by moving navigation items and title re…

…trieval logic to a shared module. Update NavigationBar and main page to utilize the new centralized navigation data, improving maintainability and consistency across the application.
Malte2036 · Jan 21, 2025 · eb31084 · eb31084
1 parent d205d01
commit eb31084
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 118 deletions.
diff --git a/src/lib/navigation/NavigationBar.svelte b/src/lib/navigation/NavigationBar.svelte
@@ -1,58 +1,18 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import logo from '$lib/icons/thw-mzgw.webp';
-
-	const navItems = [
-		{
-			title: 'Quiz',
-			items: [
-				{ name: 'Grundausbildungs-Quiz', href: '/quiz/ga/listing/' },
-				{ name: 'Sprechfunk-Quiz', href: '/quiz/radio/listing/' },
-				{ name: 'Atemschutz-Quiz', href: '/quiz/agt/listing/' },
-				{ name: 'CBRN-Quiz', href: '/quiz/cbrn/listing/' }
-			]
-		},
-		{
-			title: 'Tools',
-			items: [
-				{ name: 'CBRN-Schutzanzug', href: '/cbrn/protective-suite' },
-				{ name: 'Finnentest', href: 'https://finnentest.thw-tools.de', external: true },
-				{ name: 'Elektro Spannungsfall', href: 'https://elektro.thw-tools.de', external: true },
-				{ name: 'THW Bekleidungs Rechner', href: '/clothing' }
-			]
-		}
-	];
+	import { navigationItems, getCurrentTitleByPath } from '$lib/shared/navigation';
 
 	$: currentPath = $page.url.pathname;
 	$: isHomePage = currentPath === '/';
-
-	function getCurrentTitleByPath(path: string): string | undefined {
-		if (path.startsWith('/quiz/ga')) {
-			return 'Grundausbildungs-Quiz';
-		} else if (path.startsWith('/quiz/agt')) {
-			return 'Atemschutz-Quiz';
-		} else if (path.startsWith('/quiz/cbrn')) {
-			return 'CBRN-Quiz';
-		} else if (path.startsWith('/quiz/radio')) {
-			return 'Sprechfunk-Quiz';
-		} else if (path.startsWith('/cbrn/protective-suite')) {
-			return 'CBRN-Schutzanzug';
-		} else if (path.startsWith('/clothing')) {
-			return 'Bekleidungsrechner';
-		} else if (path === '/') {
-			return undefined;
-		} else {
-			return 'THW-Tools';
-		}
-	}
 </script>
 
 {#if !isHomePage}
 	<div class="sticky top-0 z-50 bg-white">
 		<thw-navigation-bar
 			logoUrl={logo}
 			title={getCurrentTitleByPath(currentPath)}
-			{navItems}
+			navItems={navigationItems}
 			{currentPath}
 		/>
 	</div>

diff --git a/src/lib/shared/navigation.ts b/src/lib/shared/navigation.ts
@@ -0,0 +1,107 @@
+import HammerIcon from '$lib/icons/HammerIcon.svelte';
+import WalkieTalkieIcon from '$lib/icons/WalkieTalkieIcon.svelte';
+import ChartSimpleIcon from '$lib/icons/ChartSimpleIcon.svelte';
+import CircleRadiationIcon from '$lib/icons/CircleRadiationIcon.svelte';
+import VestIcon from '$lib/icons/VestIcon.svelte';
+import HearthPulseIcon from '$lib/icons/HearthPulseIcon.svelte';
+import BoltIcon from '$lib/icons/BoltIcon.svelte';
+
+export type NavigationItem = {
+	name: string;
+	href: string;
+	external?: boolean;
+	icon?: any;
+	event?: string;
+};
+
+export type NavigationCategory = {
+	title: string;
+	description?: string;
+	items: NavigationItem[];
+};
+
+export function getCurrentTitleByPath(path: string): string | undefined {
+	if (path.startsWith('/quiz/ga')) {
+		return 'Grundausbildungs-Quiz';
+	} else if (path.startsWith('/quiz/agt')) {
+		return 'Atemschutz-Quiz';
+	} else if (path.startsWith('/quiz/cbrn')) {
+		return 'CBRN-Quiz';
+	} else if (path.startsWith('/quiz/radio')) {
+		return 'Sprechfunk-Quiz';
+	} else if (path.startsWith('/cbrn/protective-suite')) {
+		return 'CBRN-Schutzanzug';
+	} else if (path.startsWith('/clothing')) {
+		return 'Bekleidungsrechner';
+	} else if (path === '/') {
+		return undefined;
+	} else {
+		return 'THW-Tools';
+	}
+}
+
+export const navigationItems: NavigationCategory[] = [
+	{
+		title: 'Ausbildungs-Quiz',
+		description: 'Teste und verbessere dein Wissen in verschiedenen THW-Bereichen',
+		items: [
+			{
+				name: 'Grundausbildungs-Quiz',
+				href: '/quiz/ga/listing/',
+				event: 'Open GA Quiz',
+				icon: HammerIcon
+			},
+			{
+				name: 'Sprechfunk-Quiz',
+				href: '/quiz/radio/listing/',
+				event: 'Open Radio Quiz',
+				icon: WalkieTalkieIcon
+			},
+			{
+				name: 'Atemschutz-Quiz',
+				href: '/quiz/agt/listing/',
+				event: 'Open AGT Quiz',
+				icon: ChartSimpleIcon
+			},
+			{
+				name: 'CBRN-Quiz',
+				href: '/quiz/cbrn/listing/',
+				event: 'Open CBRN Quiz',
+				icon: CircleRadiationIcon
+			}
+		]
+	},
+	{
+		title: 'Tools',
+		description: 'Hilfreiche Werkzeuge für den THW-Alltag',
+		items: [
+			{
+				name: 'Bekleidungsrechner',
+				href: '/clothing',
+				event: 'Open Clothing Calculator',
+				icon: VestIcon
+			},
+
+			{
+				name: 'Finnentest',
+				href: 'https://finnentest.thw-tools.de',
+				event: 'Open Finnentest',
+				external: true,
+				icon: HearthPulseIcon
+			},
+			{
+				name: 'Elektro Spannungsfall',
+				href: 'https://elektro.thw-tools.de',
+				event: 'Open Elektro Spannungsfall',
+				external: true,
+				icon: BoltIcon
+			}
+			// {
+			// 	name: 'CBRN-Schutzanzug',
+			// 	href: '/cbrn/protective-suite',
+			// 	event: 'Open CBRN Protective Suite',
+			// 	icon: VestIcon
+			// }
+		]
+	}
+];
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,17 +1,9 @@
 <script lang="ts">
-	import FlaskVialIcon from '$lib/icons/FlaskVialIcon.svelte';
 	import logo from '$lib/icons/thw-mzgw.webp';
 	import LinkButton from '../lib/LinkButton.svelte';
-	import ChartSimpleIcon from '../lib/icons/ChartSimpleIcon.svelte';
-	import HearthPulseIcon from '../lib/icons/HearthPulseIcon.svelte';
-
-	import BoltIcon from '$lib/icons/BoltIcon.svelte';
-	import HammerIcon from '$lib/icons/HammerIcon.svelte';
-	import VestIcon from '$lib/icons/VestIcon.svelte';
 	import { bannerMessage } from '$lib/shared/stores/bannerMessage';
 	import { onMount } from 'svelte';
-	import WalkieTalkieIcon from '$lib/icons/WalkieTalkieIcon.svelte';
-	import CircleRadiationIcon from '$lib/icons/CircleRadiationIcon.svelte';
+	import { navigationItems } from '$lib/shared/navigation';
 
 	const description = {
 		headline: 'Inoffizielle Tools für THW-Helfer:',
@@ -45,70 +37,7 @@
 		}
 	});
 
-	const toolCategories = [
-		{
-			title: 'Ausbildungs-Quiz',
-			description: 'Teste und verbessere dein Wissen in verschiedenen THW-Bereichen',
-			tools: [
-				{
-					name: 'Grundausbildungs-Quiz',
-					icon: HammerIcon,
-					url: '/quiz/ga/listing/',
-					event: 'Open GA Quiz'
-				},
-				{
-					name: 'Sprechfunk-Quiz',
-					icon: WalkieTalkieIcon,
-					url: '/quiz/radio/listing/',
-					event: 'Open Radio Quiz'
-				},
-				{
-					name: 'Atemschutz-Quiz',
-					icon: ChartSimpleIcon,
-					url: '/quiz/agt/listing/',
-					event: 'Open AGT Quiz'
-				},
-				{
-					name: 'CBRN-Quiz',
-					icon: CircleRadiationIcon,
-					url: '/quiz/cbrn/listing/',
-					event: 'Open CBRN Quiz'
-				}
-			]
-		},
-		{
-			title: 'Praktische Tools',
-			description: 'Hilfreiche Werkzeuge für den THW-Alltag',
-			tools: [
-				{
-					name: 'THW Bekleidungs Rechner',
-					icon: VestIcon,
-					url: '/clothing',
-					event: 'Open THW Clothing'
-				},
-				{
-					name: 'Finnentest',
-					icon: HearthPulseIcon,
-					url: 'https://finnentest.thw-tools.de',
-					event: 'Open Finnentest',
-					external: true
-				},
-				{
-					name: 'Elektro Spannungsfall',
-					icon: BoltIcon,
-					url: 'https://elektro.thw-tools.de',
-					event: 'Open Elektro Spannungsfall',
-					external: true
-				},
-				{
-					name: 'CBRN-Schutzanzug',
-					icon: VestIcon,
-					url: '/cbrn/protective-suite',
-					event: 'Open CBRN Protective Suite'
-				}
-			]
-		}
-	];
+	const toolCategories = navigationItems;
 </script>
 
 <svelte:head>
@@ -157,9 +86,9 @@
 						</div>
 
 						<!-- Tools List -->
-						<div class="flex flex-col gap-3 flex-grow">
-							{#each category.tools as tool}
-								<LinkButton url={tool.url} blank={tool.external} dataUmamiEvent={tool.event}>
+						<div class="flex flex-col gap-3">
+							{#each category.items as tool}
+								<LinkButton url={tool.href} blank={tool.external} dataUmamiEvent={tool.event}>
 									<div class="w-6 group-hover:text-thw-600 transition-colors">
 										<svelte:component this={tool.icon} />
 									</div>