website-astro/src/components/Navigation.astro

---
import { t, l } from "astro-i18n";
import LanguageSwitcher from "./LangSwitcher.astro";
---

<nav role="navigation" aria-label={t("header.mainNav")}>
	<ul class="main-nav" role="list">
		<li>
			<a href={l("/articles")} class="clean-link nice-link"
				>{t("article.titre")}</a
			>
			<span aria-hidden="true">&middot;</span>
		</li>
		<li>
			<a href={l("/fragments")} class="clean-link nice-link"
				>{t("fragments.titre")}</a
			>
			<span aria-hidden="true">&middot;</span>
		</li>
		<li>
			<a href={l("/references")} class="clean-link nice-link"
				>{t("references.titre")}</a
			>
			<span aria-hidden="true">&middot;</span>
		</li>
		<li>
			<a
				href="mailto:contact@nardu.in"
				class="clean-link nice-link"
				title={t("contact.email")}>{t("contact.title")}</a
			><span aria-hidden="true">&nbsp;&#x7C;</span>
		</li>
		<li>
			<LanguageSwitcher />
		</li>
	</ul>
</nav>

<style>
	.main-nav {
		display: flex;
		flex-flow: row wrap;
		gap: var(--space-2xs);
		justify-content: center;
	}
	.main-nav a {
		text-transform: capitalize;
	}
</style>