From 6ff1e5ec1c6b94e8d11891df99e7ada40770c030 Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Wed, 30 Oct 2024 21:24:21 +0100
Subject: [PATCH] JS version

---
 package.json                             |  2 +-
 src/components/navbar/navbarMobile.astro | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3fcb40a..c3ec2ac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.50",
+	"version": "0.2.0-pre.51",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
diff --git a/src/components/navbar/navbarMobile.astro b/src/components/navbar/navbarMobile.astro
index 9337a47..7ee8c25 100644
--- a/src/components/navbar/navbarMobile.astro
+++ b/src/components/navbar/navbarMobile.astro
@@ -13,6 +13,15 @@ const hamburger_src_url = `url("${hamburger.src}")`
   </label>
 </div>
 
+<script>
+  const dropdownBtn = document.querySelector(".dropdown-btn")!;
+  const dropdownContent = document.querySelector(".dropdown-content")!;
+
+  dropdownBtn.addEventListener("click", () => {
+    dropdownContent.classList.toggle("menu-open");
+  });
+</script>
+
 <style define:vars={{ hamburger_src_url }}>
   input[type="checkbox"] {
     opacity: 0;
@@ -20,9 +29,11 @@ const hamburger_src_url = `url("${hamburger.src}")`
     touch-action: manipulation;
   }
 
-  input[type="checkbox"]:checked ~ .dropdown-content {
+  .dropdown-content.menu-open {
     display: flex;
     height: auto;
+    transform: translateY(0);
+    transition: transform var(--a-time-default) var(--a-animation-1);
   }
 
   .dropdown-content {
@@ -33,11 +44,12 @@ const hamburger_src_url = `url("${hamburger.src}")`
     justify-content: center;
     background-color: var(--c-primary-background);
     width: 100%;
-    height: 0px;
     list-style-type: none;
     line-height: 3em;
     margin: 0.5rem 0px 0px;
     padding: 0;
+    transform: translateY(-1em);
+    transition: transform var(--a-time-default) var(--a-animation-1);
   }
 
   .dropdown-btn {