Übersetzungen + Prüfbox Bezahlung

src/components/Header.astro

@@ -1,5 +1,9 @@
 ---
+import i18next from "i18next";
+import {localizeUrl} from "astro-i18next"
+import { t } from "i18next";
 import { isLoggedIn } from "../lib/UI/isLoggedIn";
+import LanguageDropdown from "./LanguageDropdown.svelte";
 
 const loggedIn = isLoggedIn(Astro);
 ---
@@ -16,22 +20,56 @@ const loggedIn = isLoggedIn(Astro);
 				src="/images/header/logo-big.png"
 				class="header-logo"
 				alt="IBCornelsen - Logo"
-				onclick="window.location.href = '/'"
+				onclick="
+				window.location.href = '/'
+"
 			/>
-			<h2 class="text-secondary font-semibold text-2xl absolute top-8 right-0">Energieausweis online erstellen</h2>
-			<h2 class="text-primary font-semibold text-xl absolute top-16 right-0">Energieausweise nach aktueller GEG</h2>
+			<h2
+				class="text-secondary font-semibold text-2xl absolute top-8 right-0"
+			>
+				Energieausweis online erstellen
+			</h2>
+			<h2
+				class="text-primary font-semibold text-xl absolute top-16 right-0"
+			>
+				Energieausweise nach aktueller GEG
+			</h2>
 		</div>
 	</div>
 
 	<div class="nav-head">
+		<LanguageDropdown
+			countries={[
+				{ iso: "de", flag: "de", name: "Deutsch" },
+				{ iso: "en", flag: "us", name: "English" },
+				{ iso: "fr", flag: "fr", name: "Français" },
+			]}
+			localized={i18next.languages.map(l => {
+				return { lang: l, path: localizeUrl(Astro.request.url, l)};
+			})}
+			current={i18next.language}
+			client:load
+		/>
 		<a
 			class="headerButton"
 			href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
 			>Energieausweis erstellen</a
 		>
-		<a class="headerButton" href="/energieausweis-kontakt.php">Kontakt</a>
+		<a class="headerButton" href="/energieausweis-kontakt.php"
+			>{t("header.kontakt")}</a
+		>
 		<a class="headerButton" href="/agb">AGB</a>
-		{loggedIn ? <a class="headerButton" href="/user">Profil</a> : <a class="headerButton" href="/login">Login</a>}
+		{
+			loggedIn ? (
+				<a class="headerButton" href="/user">
+					{t("header.profil")}
+				</a>
+			) : (
+				<a class="headerButton" href="/login">
+					{t("header.login")}
+				</a>
+			)
+		}
 		<a class="hamburger_menu"
 			><img src="/images/hamburger.png" alt="hamburger" /></a
 		>