broken header shit

src/components/Header.astro

@@ -15,7 +15,7 @@ const t = useTranslations(lang);
   <div class="w-1/8">
     {/* Typical desktop menu */}
     <div class="relative flex-row hidden md:flex">
-      <HeaderButton text={t("header.games")}>
+      <HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
         <Icon
           name="ph:cube"
           class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
@@ -90,4 +90,11 @@ const t = useTranslations(lang);
   if (mobileNavTrigger) {
     mobileNavTrigger.addEventListener("click", openDialog);
   }
+
+  document.addEventListener("astro:after-swap", () => {
+    if (mobileNavTrigger) {
+      const mobileNavTrigger = document.getElementById("mobileNavTrigger")!;
+      mobileNavTrigger.addEventListener("click", openDialog);
+    }
+  });
 </script>

src/components/HeaderButton.astro

@@ -1,9 +1,11 @@
 ---
-const { text, icon } = Astro.props;
+const { text, route } = Astro.props;
 ---
 
-<div
+<a
   class="group flex w-full flex-row items-center justify-center border-t-2 border-solid border-navbar-text-color p-4 md:border-none h-1/3 md:h-fit"
+  id="header_anchor"
+  href={route}
 >
   <slot />
   <span
@@ -11,4 +13,4 @@ const { text, icon } = Astro.props;
   >
     {text}
   </span>
-</div>
+</a>

src/components/MobileNavigation.astro

@@ -8,8 +8,9 @@ const t = useTranslations(lang);
 
 <div
   class="h-full mt-16 flex w-full flex-col justify-evenly md:flex-row bg-navbar-color m-auto"
+  id="mobileNavMenu"
 >
-  <HeaderButton text={t("header.games")}>
+  <HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
     <Icon
       name="ph:cube"
       class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
@@ -28,3 +29,6 @@ const t = useTranslations(lang);
     />
   </HeaderButton>
 </div>
+<script>
+  const mobileNavButton = document.getElementById("mobileNavButton");
+</script>

src/components/debug.astro

@@ -0,0 +1,103 @@
+---
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+import { isMobileNavOpen } from "../store.js";
+import Logo from "./Logo.astro";
+import HeaderButton from "./HeaderButton.astro";
+import { Icon } from "astro-icon/components";
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<div
+  id="navbar"
+  class="flex h-16 flex-row items-center justify-end border-b-2 border-border-color bg-navbar-color px-4 z-30 relative"
+>
+  <div class="w-1/8">
+    {/* Typical desktop menu */}
+    <div class="relative flex-row hidden md:flex">
+      <HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
+        <Icon
+          name="ph:cube"
+          class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
+        />
+        {
+          /* Astro won't let us pass the icon as a prop so it's going into the outlet here. */
+        }
+      </HeaderButton>
+      <HeaderButton text={t("header.settings")}>
+        <Icon
+          name="ph:wrench-fill"
+          class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
+        />
+      </HeaderButton>
+      <HeaderButton text={t("header.morelinks")}>
+        <Icon
+          name="ph:link-bold"
+          class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
+        />
+      </HeaderButton>
+    </div>
+    {/* Mobile hamburger menu */}
+    <div class="flex md:hidden" id="mobileNavTrigger">
+      <Icon
+        name="ph:text-align-justify-bold"
+        class="h-9 w-9 text-text-color"
+        id="hamburger_menu"
+      />
+      <Icon
+        name="ph:caret-right-bold"
+        class="h-9 w-9 text-text-color hidden"
+        id="right_caret"
+      />
+    </div>
+  </div>
+</div>
+<script>
+  import { isMobileNavOpen } from "../store.js";
+  let isMobileNavOpenLocal = true;
+  const right_caret = document.getElementById("right_caret");
+  const hamburger_menu = document.getElementById("hamburger_menu");
+  const mobileNavTrigger = document.getElementById("mobileNavTrigger");
+  // Create a copy of the nano store so we can make this a toggle
+
+  // Set the store to true when the button is clicked
+  function openDialog() {
+    if (isMobileNavOpenLocal == false) {
+      isMobileNavOpen.set(true);
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "none";
+        right_caret.style.display = "block";
+      }
+    } else {
+      isMobileNavOpen.set(false);
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "block";
+        right_caret.style.display = "none";
+      }
+    }
+  }
+
+  isMobileNavOpen.subscribe((open) => {
+    if (open) {
+      isMobileNavOpenLocal = true;
+    } else {
+      isMobileNavOpenLocal = false;
+    }
+  });
+
+  // Add an event listener to the button
+
+  if (mobileNavTrigger) {
+    mobileNavTrigger.addEventListener("click", openDialog);
+  }
+
+  document.addEventListener("astro:after-swap", () => {
+    function dumbFunc() {
+      alert(1);
+    }
+    const mobileNavTrigger = document.getElementById("mobileNavTrigger");
+    if (mobileNavTrigger) {
+      mobileNavTrigger.addEventListener("click", dumbFunc);
+    }
+  });
+</script>

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import Header from "../components/Header.astro";
+import { ViewTransitions } from "astro:transitions";
 import "../themes/nebula.css";
 import MobileNavigation from "../components/MobileNavigation.astro";
 
@@ -19,8 +20,9 @@ const { title } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <ViewTransitions />
   </head>
-  <body class="h-screen overflow-x-hidden">
+  <body class="h-screen overflow-hidden">
     <Header />
     <slot />
     <div
@@ -29,8 +31,6 @@ const { title } = Astro.props;
     >
       <MobileNavigation />
     </div>
-  </body>
-</html>
     <script>
       import { isMobileNavOpen } from "../store.js";
       const mobileNavMenu = document.getElementById("mobileNavMenu");
@@ -89,3 +89,5 @@ const { title } = Astro.props;
         font-family: Roboto;
       }
     </style>
+  </body>
+</html>