From e52c45b3451963d6d210f198cdcf41b27521d034 Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Tue, 23 Jul 2024 18:51:05 -0500
Subject: [PATCH] sliding animation!

---
 src/components/Header.astro           | 2 +-
 src/components/MobileNavigation.astro | 2 +-
 src/pages/[lang]/index.astro          | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 45fd58d..35be022 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -10,7 +10,7 @@ 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"
+  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 */}
diff --git a/src/components/MobileNavigation.astro b/src/components/MobileNavigation.astro
index 710426f..ea43403 100644
--- a/src/components/MobileNavigation.astro
+++ b/src/components/MobileNavigation.astro
@@ -7,7 +7,7 @@ const t = useTranslations(lang);
 ---
 
 <div
-  class="absolute bottom-0 h-[calc(100%-4rem)] flex w-full flex-col justify-evenly md:flex-row bg-navbar-color m-auto"
+  class="h-full mt-16 flex w-full flex-col justify-evenly md:flex-row bg-navbar-color m-auto"
 >
   <HeaderButton text={t("header.games")}>
     <Icon
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 0472164..20bb3c2 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -12,7 +12,7 @@ export function getStaticPaths() {
 <Layout title="Welcome to Astro.">
   <p>The services</p>
   <p id="">Mobile Navvy</p>
-  <div id="mobileNavMenu" class="hidden w-full">
+  <div id="mobileNavMenu" class="w-full fixed inset-0 h-[calc(100vh-4rem)] z-0">
     <MobileNavigation />
   </div>
 </Layout>
@@ -24,10 +24,11 @@ export function getStaticPaths() {
     if (open) {
       if (mobileNavMenu) {
         mobileNavMenu.style.display = "block";
+        mobileNavMenu.style.transform = "translateX(0%)";
       }
     } else {
       if (mobileNavMenu) {
-        mobileNavMenu.style.display = "none";
+        mobileNavMenu.style.transform = "translateX(100%)";
       }
     }
   });
@@ -36,6 +37,7 @@ export function getStaticPaths() {
   #mobileNavMenu {
     -webkit-transition-duration: 600ms;
     transition-duration: 600ms;
+    transform: translateX(100%);
   }
 
   @keyframes slide-left {