Initial commit of Astro version

src/components/NavHeader.astro

@@ -0,0 +1,38 @@
+---
+interface NavRoute {
+  path: string;
+  name: string;
+}
+
+const navRoutes: NavRoute[] = [
+  { path: "/", name: "Home" },
+  { path: "/about", name: "About me" },
+  { path: "/work", name: "My work" },
+  { path: "/contact", name: "Contact" },
+];
+
+const isCurrentRoute = (navRoute: NavRoute) => Astro.url.pathname == navRoute.path;
+---
+
+<nav class="text-md pb-6 pt-2 sm:text-lg print:hidden">
+  <ul class="flex flex-wrap justify-center gap-x-4 gap-y-6 py-6 tracking-wide sm:gap-x-5 sm:gap-y-8">
+    {
+      navRoutes.map((route) => (
+        <li>
+          <a
+            href={route.path}
+            class:list={[
+              "rounded border px-6 py-2 uppercase transition-colors hover:underline focus:underline sm:px-8 sm:py-3",
+              isCurrentRoute(route)
+                ? "border-bm-500 text-bm-500 dark:border-bm-400 dark:text-bm-400"
+                : "border-stone-600 text-stone-600 hover:border-bm-500 hover:text-bm-500 focus:border-bm-500 focus:text-bm-500 dark:border-zinc-300 dark:text-zinc-300 dark:hover:border-bm-400 dark:hover:text-bm-400 dark:focus:border-bm-400 dark:focus:text-bm-400",
+            ]}
+            aria-current-value={isCurrentRoute(route).toString()}
+          >
+            {route.name}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</nav>