misc

src/components/Nav.astro

@@ -1,89 +0,0 @@
----
-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" },
-  { label: "Memes", href: "/memes" },
-  { 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>