misc

2025-07-24 10:34:26 -04:00
parent 8faf5de77f
commit d85d8697bc
3 changed files with 3 additions and 3 deletions
--- a/src/layouts/Nav.astro
+++ b/src/layouts/Nav.astro
@@ -0,0 +1,88 @@
+---
+import { metaData } from "../config";
+import { Icon } from "astro-icon/components";
+import ExitToApp from '@mui/icons-material/ExitToApp';
+
+const navItems = [
+  { label: "Home", href: "/" },
+  { label: "Radio", href: "/radio" },
+  { blockSeparator: true },
+  { label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
+  { label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
+  { label: "Old Site", href: "https://old.codey.lol", icon: ExitToApp },
+];
+
+const currentPath = Astro.url.pathname;
+---
+<script is:inline>
+  toggleTheme = () => {
+    console.log("Toggle!")
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    const newTheme = currentTheme === "dark" ? "light" : "dark";
+    document.dispatchEvent(new CustomEvent("set-theme", { detail: newTheme }));
+}
+</script>
+<nav class="w-full px-4 py-4 bg-transparent">
+  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+    <a href="/" class="text-xl font-semibold header-text whitespace-nowrap">
+      {metaData.title}
+    </a>
+
+    <ul class="flex flex-wrap items-center gap-2 text-sm text-neutral-700 dark:text-neutral-300">
+      {navItems.map((item, index) => {
+        if (item.blockSeparator) {
+          return (
+            <li class="text-neutral-500 dark:text-neutral-500 px-2 select-none" aria-hidden="true">
+              ‖
+            </li>
+          );
+        }
+
+        const isExternal = item.href?.startsWith("http");
+        const normalize = (url) => url?.replace(/\/+$/, '') || '/';
+        const isActive = !isExternal && normalize(item.href) === normalize(currentPath);
+
+        const nextItem = navItems[index + 1];
+        const shouldShowThinBar = nextItem && !nextItem.blockSeparator;
+
+        return (
+          <>
+            <li>
+              <a
+                href={item.href}
+                class={`flex items-center gap-1 px-2 py-1 rounded-md transition-colors
+                  hover:bg-neutral-200 dark:hover:bg-neutral-800
+                  ${isActive ? "font-semibold underline underline-offset-4" : ""}`}
+                target={isExternal ? "_blank" : undefined}
+                rel={isExternal ? "noopener noreferrer" : undefined}
+              >
+                {item.label}
+                {item.icon === ExitToApp && <ExitToApp className="w-4 h-4" client:load />}
+              </a>
+            </li>
+            {shouldShowThinBar && (
+              <li class="text-neutral-400 dark:text-neutral-600 select-none" aria-hidden="true">
+                |
+              </li>
+
+            )}
+          </>
+        );
+      })}
+      <li>
+        <button
+          id="theme-toggle"
+          aria-label="Toggle theme"
+          type="button"
+          class="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-opacity"
+          onclick="toggleTheme()"
+        >
+          <Icon
+            name="fa6-solid:circle-half-stroke"
+            class="h-4 w-4 text-[#1c1c1c] dark:text-[#D4D4D4]"
+          />
+        </button>
+      </li>
+    </ul>
+  </div>
+</nav>