From 6162b3e27fad0ed25725ebe82e8166a9bde268f9 Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Tue, 23 Jul 2024 19:27:38 -0500
Subject: [PATCH] Start on games page and move mobile navigation to the layout

---
 src/components/Header.astro  | 24 ++++++++++++++++++++++--
 src/layouts/Layout.astro     | 32 ++++++++++++++++++++++++++++++++
 src/pages/[lang]/games.astro | 12 ++++++++++++
 src/pages/[lang]/index.astro | 27 ---------------------------
 4 files changed, 66 insertions(+), 29 deletions(-)
 create mode 100644 src/pages/[lang]/games.astro
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 35be022..92fe606 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -39,21 +39,41 @@ const t = useTranslations(lang);
     </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" />
+      <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";
+      }
     }
   }
 
@@ -66,7 +86,7 @@ const t = useTranslations(lang);
   });
 
   // Add an event listener to the button
-  const mobileNavTrigger = document.getElementById("mobileNavTrigger");
+
   if (mobileNavTrigger) {
     mobileNavTrigger.addEventListener("click", openDialog);
   }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index dd5eebb..9e5e20b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import Header from "../components/Header.astro";
 import "../themes/nebula.css";
+import MobileNavigation from "../components/MobileNavigation.astro";
 
 interface Props {
   title: string;
@@ -22,8 +23,39 @@ const { title } = Astro.props;
   <body class="h-screen overflow-x-hidden">
     <Header />
     <slot />
+    <div
+      id="mobileNavMenu"
+      class="w-full fixed inset-0 h-[calc(100vh-4rem)] z-0"
+    >
+      <MobileNavigation />
+    </div>
   </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 {
diff --git a/src/pages/[lang]/games.astro b/src/pages/[lang]/games.astro
new file mode 100644
index 0000000..baaec74
--- /dev/null
+++ b/src/pages/[lang]/games.astro
@@ -0,0 +1,12 @@
+---
+import { STATIC_PATHS } from "../../i18n/utils";
+import Layout from "../../layouts/Layout.astro";
+
+export function getStaticPaths() {
+  return STATIC_PATHS;
+}
+---
+
+<Layout title="Chango Games">
+  <p>Chango games</p>
+</Layout>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 4801fcc..8f28c94 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -12,31 +12,4 @@ export function getStaticPaths() {
 <Layout title="Welcome to Astro.">
   <p>The services</p>
   <p id="">Mobile Navvy</p>
-  <div id="mobileNavMenu" class="w-full fixed inset-0 h-[calc(100vh-4rem)] z-0">
-    <MobileNavigation />
-  </div>
 </Layout>
-<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>
