i18n start + css start

src/components/Header.astro

@@ -1,7 +1,52 @@
 ---
-import Navigation from '../components/Navigation.astro';
+import { t, l } from "astro-i18n";
+
+import Navigation from "../components/Navigation.astro";
 ---
 
-<header role="banner">
+<header class="region" 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>
 	<Navigation />
-</header>
+</header>
+
+<style>
+	header {
+		padding: var(--space-xs-s) 0;
+		margin: 0 auto var(--space-xs-s) 0;
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--space-xs-s);
+	}
+	header > .logo {
+		margin-inline-end: auto;
+	}
+	a {
+		text-decoration: none;
+	}
+	.skip-link {
+		position: absolute;
+		top: 20px;
+		left: 20px;
+		height: 1px;
+		width: 1px;
+		-webkit-clip: rect(0 0 0 0);
+		clip: rect(0 0 0 0);
+		overflow: hidden;
+		z-index: 99999;
+		background-color: #fff;
+	}
+	.skip-link:focus {
+		padding: 6px;
+		-webkit-clip: auto;
+		clip: auto;
+		overflow: visible;
+		width: auto;
+		height: auto;
+	}
+	.logo {
+		font-size: var(--size-1);
+		font-weight: bold;
+		color: var(--darkBlue);
+	}
+</style>

src/components/LanguageSwitcher.astro

@@ -0,0 +1,21 @@
+---
+import { l, astroI18n } from "astro-i18n";
+
+// get the locale currently in use
+const currentLocale = astroI18n.langCode;
+// get all the locales available on the website and remove the one currently in use
+const availableLocales = astroI18n.langCodes.filter(
+	(locale) => locale !== currentLocale
+);
+---
+
+<ul role="list">
+	{
+		// create a list of available alternative locale
+		availableLocales.map((locale) => (
+			<li>
+				<a href={l("/", {}, "", locale)}>{locale}</a>
+			</li>
+		))
+	}
+</ul>

src/components/Navigation.astro

@@ -1,10 +1,44 @@
 ---
+import { t, l } from "astro-i18n";
+import LanguageSwitcher from "./LanguageSwitcher.astro";
+---
 
----
-<nav role="navigation" aria-label="Navigation principale">
-	<ul>
-		<li><a href="/">Accueil</a></li>
-		<li><a href="/articles/">Articles</a></li>
-		<li><a href="/tags/">Catégories</a></li>
+<nav role="navigation" aria-label={t("header.mainNav")}>
+	<ul class="main-nav" role="list">
+		<li>
+			<a href={l("/")}>{t("accueil")}</a>
+			<span aria-hidden="true">&middot;</span>
+		</li>
+		<li>
+			<a href={l("/articles")}>{t("article.titre")}</a>
+			<span aria-hidden="true">&middot;</span>
+		</li>
+		<li>
+			<a href={}>{t("fragments.titre")}</a>
+			<span aria-hidden="true">&middot;</span>
+		</li>
+		<li>
+			<a
+				href="mailto:contact@nardu.in"
+				class="nice-link"
+				title={t("contactLien")}
+				>{t("contact")}
+			</a>
+			<span aria-hidden="true">&#x7C;</span>
+		</li>
+		<li>
+			<LanguageSwitcher />
+		</li>
 	</ul>
-</nav>
+</nav>
+
+<style>
+	.main-nav {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--space-2xs);
+	}
+	a {
+		text-decoration: none;
+	}
+</style>