🎉 Remove target _self from nav bar links

package.json

@@ -14,7 +14,7 @@
 		"test": "vitest"
 	},
 	"dependencies": {
-		"@malte2036/thw-tools-components": "^0.2.21"
+		"@malte2036/thw-tools-components": "^0.2.24"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-node": "^5.2.2",

src/lib/icons/ExternalLinkIcon.svelte

@@ -0,0 +1,11 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class="h-4 w-4 inline-block ml-1"
+	viewBox="0 0 20 20"
+	fill="currentColor"
+>
+	<path
+		d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
+	/>
+	<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+</svg>

src/lib/icons/MenuIcon.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class="h-6 w-6"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke="currentColor"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M4 6h16M4 12h16M4 18h16"
+	/>
+</svg>

src/lib/navigation/NavigationBar.svelte

@@ -0,0 +1,32 @@
+<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' }
+			]
+		}
+	];
+
+	$: currentPath = $page.url.pathname;
+	$: isHomePage = currentPath === '/';
+</script>
+
+{#if !isHomePage}
+	<thw-navigation-bar logoUrl={logo} title="THW Tools" {navItems} {currentPath} />
+{/if}

src/routes/+layout.svelte

@@ -1,37 +1,14 @@
 <script lang="ts">
 	import '@malte2036/thw-tools-components';
-
 	import { dev } from '$app/environment';
 	import { PUBLIC_UMAMI_ENDPOINT, PUBLIC_UMAMI_WEBSITEID } from '$env/static/public';
-
 	import '../app.css';
 	import { page } from '$app/stores';
-	import Header from './Header.svelte';
 	import Banner from '$lib/Banner.svelte';
 	import Dialog from '$lib/Dialog.svelte';
 	import Button from '$lib/Button.svelte';
 	import InstallPWADialog from '$lib/InstallPWADialog.svelte';
-
-	let title: string | undefined;
-	$: title = getCurrentTitleByPath($page.url.pathname);
-
-	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 === '/') {
-			return undefined;
-		} else {
-			return 'THW-Tools';
-		}
-	}
+	import NavigationBar from '$lib/navigation/NavigationBar.svelte';
 
 	let showFeedback = false;
 	let showInstallPWAHelp = false;
@@ -51,9 +28,7 @@
 </svelte:head>
 
 <div class="flex flex-col gap-4 justify-between min-h-screen">
-	{#if title !== undefined}
-		<Header {title} />
-	{/if}
+	<NavigationBar />
 	<Banner />
 	<div class="grow">
 		<slot />