sliding animation!

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 */}

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

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 {