initial commit

src/components/Nav.astro

@@ -0,0 +1,76 @@
+---
+import { metaData } from "../config";
+import { Icon } from "astro-icon/components";
+import ExitToApp from '@mui/icons-material/ExitToApp';
+import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
+
+const navItems = {
+  "/": { name: "Home", className: "", icon: null },
+  "": { name: "", className: "", icon: HorizontalRuleIcon },
+  "/radio": { name: "Radio", className: "", icon: null },
+  "‡": { name: "", className: "", icon: HorizontalRuleIcon },
+  "https://status.boatson.boats": { name: "Status", className: "", icon: ExitToApp }
+};
+---
+
+<nav class="lg:mb-16 mb-12 py-5">
+  <div class="flex flex-col md:flex-row md:items-center justify-between">
+    <div class="flex items-center">
+      <a href="/" class="text-3xl font-semibold header-text">
+        {metaData.title}
+      </a>
+    </div>
+    <div class="flex flex-row gap-4 mt-6 md:mt-0 md:ml-auto items-center">
+      {
+        Object.entries(navItems).map(([path, { name, className, icon }]) => 
+        {
+          let isVisualSeparator = icon === HorizontalRuleIcon
+
+          if (isVisualSeparator) {
+            return (
+              <HorizontalRuleIcon client:load
+                                                          size="sm"
+                                                          className="hr"
+                                                          sx={{
+                                                            color: 'inherit',
+                                                          }} />
+            )
+          }
+        return (
+          <a
+            href={path}
+            class={`transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative`}>
+            {name}
+          </a>
+        )})
+      }
+      <button
+        id="theme-toggle"
+        aria-label="Toggle theme"
+        class="flex items-center justify-center transition-opacity duration-300 hover:opacity-90">
+        <Icon
+          name="fa6-solid:circle-half-stroke"
+          class="h-[14px] w-[14px] text-[#1c1c1c] dark:text-[#D4D4D4]"
+        />
+      </button>
+    </div>
+  </div>
+</nav>
+
+<script is:inline>
+  function setTheme(theme) {
+    document.dispatchEvent(new CustomEvent("set-theme", { detail: theme }));
+  }
+
+  function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    const newTheme = currentTheme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+  }
+
+  document.addEventListener("astro:page-load", () => {
+    document
+      .getElementById("theme-toggle")
+      .addEventListener("click", toggleTheme);
+  });
+</script>