working i18n conf

src/components/Header.astro

@@ -4,9 +4,11 @@ import { t, l } from "astro-i18n";
 import Navigation from "../components/Navigation.astro";
 ---
 
-<header class="region" role="banner">
+<header class="" role="banner">
 	<a href="#skip-content" class="skip-link"> {t("header.skipLink")}</a>
-	<a class="logo" href={l("/")} aria-label={t("header.homeLink")}>nardu.in</a>
+	<p class="logo">
+		<a href={l("/")} aria-label={t("header.homeLink")}>nardu.in</a>
+	</p>
 	<Navigation />
 </header>
 
@@ -17,9 +19,21 @@ import Navigation from "../components/Navigation.astro";
 		display: flex;
 		flex-flow: row wrap;
 		gap: var(--space-xs-s);
+		justify-content: space-between;
+		inline-size: 100%;
 	}
 	header > .logo {
-		margin-inline-end: auto;
+		/* margin-inline-end: auto; */
+		flex-grow: 1;
+		/* flex-basis: 100%; */
+		text-align: center;
+	}
+	header > .logo a {
+		text-align: center;
+	}
+	header > :global(:last-child) {
+		flex-grow: 999;
+		margin-inline-start: auto;
 	}
 	a {
 		text-decoration: none;
@@ -47,6 +61,6 @@ import Navigation from "../components/Navigation.astro";
 	.logo {
 		font-size: var(--size-1);
 		font-weight: bold;
-		color: var(--darkBlue);
+		color: var(--color-dark-blue);
 	}
 </style>

src/components/LanguageSwitcher.astro

@@ -1,5 +1,6 @@
 ---
 import { l, astroI18n } from "astro-i18n";
+import { I18nProvider } from "astro-i18n/components";
 
 // get the locale currently in use
 const currentLocale = astroI18n.langCode;
@@ -7,15 +8,19 @@ const currentLocale = astroI18n.langCode;
 const availableLocales = astroI18n.langCodes.filter(
 	(locale) => locale !== currentLocale
 );
+// current path
+const currentRoute = Astro.url.pathname;
 ---
 
-<ul role="list">
-	{
-		// create a list of available alternative locale
-		availableLocales.map((locale) => (
-			<li>
-				<a href={l("/", {}, "", locale)}>{locale}</a>
-			</li>
-		))
-	}
-</ul>
+<I18nProvider>
+	<ul role="list">
+		{
+			// create a list of available alternative locale
+			availableLocales.map((locale) => (
+				<li>
+					<a href={l(currentRoute as any, {}, {}, locale as any)}>{locale}</a>
+				</li>
+			))
+		}
+	</ul>
+</I18nProvider>

src/components/Navigation.astro

@@ -37,6 +37,7 @@ import LanguageSwitcher from "./LanguageSwitcher.astro";
 		display: flex;
 		flex-flow: row wrap;
 		gap: var(--space-2xs);
+		justify-content: center;
 	}
 	a {
 		text-decoration: none;