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,63 +31,63 @@ const { title } = Astro.props;
     >
       <MobileNavigation />
     </div>
+    <script>
+      import { isMobileNavOpen } from "../store.js";
+      const mobileNavMenu = document.getElementById("mobileNavMenu");
+      // Listen to changes in the store, and show/hide the mobile navigation accordingly
+      isMobileNavOpen.subscribe((open) => {
+        if (open) {
+          if (mobileNavMenu) {
+            mobileNavMenu.style.display = "block";
+            mobileNavMenu.style.transform = "translateX(0%)";
+          }
+        } else {
+          if (mobileNavMenu) {
+            mobileNavMenu.style.transform = "translateX(100%)";
+          }
+        }
+      });
+    </script>
+    <style>
+      #mobileNavMenu {
+        -webkit-transition-duration: 600ms;
+        transition-duration: 600ms;
+        transform: translateX(100%);
+      }
+    </style>
+
+    <style is:global>
+      @import "https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap";
+      :root {
+        --accent: 136, 58, 234;
+        --accent-light: 224, 204, 250;
+        --accent-dark: 49, 10, 101;
+        --accent-gradient: linear-gradient(
+          45deg,
+          rgb(var(--accent)),
+          rgb(var(--accent-light)) 30%,
+          white 60%
+        );
+      }
+      html {
+        font-family: system-ui, sans-serif;
+        background: #13151a;
+        background-size: 224px;
+      }
+      code {
+        font-family:
+          Menlo,
+          Monaco,
+          Lucida Console,
+          Liberation Mono,
+          DejaVu Sans Mono,
+          Bitstream Vera Sans Mono,
+          Courier New,
+          monospace;
+      }
+      .roboto {
+        font-family: Roboto;
+      }
+    </style>
   </body>
 </html>
-<script>
-  import { isMobileNavOpen } from "../store.js";
-  const mobileNavMenu = document.getElementById("mobileNavMenu");
-  // Listen to changes in the store, and show/hide the mobile navigation accordingly
-  isMobileNavOpen.subscribe((open) => {
-    if (open) {
-      if (mobileNavMenu) {
-        mobileNavMenu.style.display = "block";
-        mobileNavMenu.style.transform = "translateX(0%)";
-      }
-    } else {
-      if (mobileNavMenu) {
-        mobileNavMenu.style.transform = "translateX(100%)";
-      }
-    }
-  });
-</script>
-<style>
-  #mobileNavMenu {
-    -webkit-transition-duration: 600ms;
-    transition-duration: 600ms;
-    transform: translateX(100%);
-  }
-</style>
-
-<style is:global>
-  @import "https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap";
-  :root {
-    --accent: 136, 58, 234;
-    --accent-light: 224, 204, 250;
-    --accent-dark: 49, 10, 101;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      rgb(var(--accent-light)) 30%,
-      white 60%
-    );
-  }
-  html {
-    font-family: system-ui, sans-serif;
-    background: #13151a;
-    background-size: 224px;
-  }
-  code {
-    font-family:
-      Menlo,
-      Monaco,
-      Lucida Console,
-      Liberation Mono,
-      DejaVu Sans Mono,
-      Bitstream Vera Sans Mono,
-      Courier New,
-      monospace;
-  }
-  .roboto {
-    font-family: Roboto;
-  }
-</style>