Summary (required)

src/components/Navbar.astro

@@ -0,0 +1,23 @@
+---
+import Navlink from "./Navlink.astro";
+const links = [
+	{
+		display: "Home",
+		icon: "H",
+		href: "/"
+	},{
+		display: "Blog",
+		icon: "B",
+		href: "/blog"
+	}, {
+		display: "About",
+		icon: "A",
+		href: "/about"
+	}
+];
+---
+<nav class="bg-white w-full flex justify-center">
+	<div class="justify-around w-full md:w-[767px] flex">
+		{ links.map((item) => (<Navlink href={item.href}, display={item.display}, icon={item.icon} isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) }
+	</div>
+</nav>

src/components/Navlink.astro

@@ -0,0 +1,6 @@
+---
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+const { display, href, icon, isActive } = Astro.props;
+---
+<a href={getRelativeLocaleUrl(Astro.currentLocale, href)} class={(isActive ? "bg-yellow-300 " : " ") + "w-full text-center"}><span class="hidden lg:visible">{icon}</span><span>{display}</span></a>