feat: i18n

src/routes/+layout.svelte

@@ -1,11 +1,34 @@
 <script lang="ts">
   import "../app.css";
   import type { Snippet } from 'svelte';
+  import { ParaglideJS } from '@inlang/paraglide-sveltekit';
+  import { i18n } from '$lib/i18n';
+  import { languageTag } from '$lib/paraglide/runtime';
 
   let { children }: { children?: Snippet } = $props();
 </script>
 
-<header class="fixed z-50 mix-blend-difference p-1">
-  <a href="/" class="text-white text-2xl">schreifuchs.ch</a>
-</header>
-{@render children?.()}
+<ParaglideJS {i18n}>
+  <header class="fixed z-50 mix-blend-difference p-1 w-full flex justify-between items-start">
+    <a href="/" class="text-white text-2xl">schreifuchs.ch</a>
+    <nav class="flex gap-2 p-2">
+      <a 
+        href="/" 
+        hreflang="de" 
+        data-no-translate
+        class="text-white hover:underline {languageTag() === 'de' ? 'font-bold' : ''}"
+      >
+        DE
+      </a>
+      <a 
+        href="/en" 
+        hreflang="en" 
+        data-no-translate
+        class="text-white hover:underline {languageTag() === 'en' ? 'font-bold' : ''}"
+      >
+        EN
+      </a>
+    </nav>
+  </header>
+  {@render children?.()}
+</ParaglideJS>