From db09aac9e5a0f98608dad97048d006f78138c47e Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Mon, 22 Jan 2024 02:11:10 -0800
Subject: [PATCH] fixed navbar bugs

- fixed a bug where the animation is broken when a person spams the hamburger icon
- fixed a display bug where the mobile navbar shows a white line / gap when the dropdown is shown.
---
 src/components/Navbar.astro | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index dbd2c7c..e427191 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -22,8 +22,8 @@ import navbarPages from "../data/navbarPages.json";
             </ul>
         </nav>
         <nav
-            class="xl:hidden absolute top-[80px] w-full bg-black overflow-y-hidden transition-all duration-500 -translate-y-full z-0"
-            style="height: calc(100vh - 80px);"
+            class="xl:hidden absolute top-[75px] w-full bg-black overflow-y-hidden transition-all duration-500 -translate-y-full z-0"
+            style="height: calc(100vh - 75px);"
             id="secondNav"
         >
             <ul
@@ -57,36 +57,51 @@ import navbarPages from "../data/navbarPages.json";
 </div>
 
 <script>
-    var hamburger = document.querySelector(".hamburger");
+    var hamburger = document.querySelector(".hamburger") as HTMLButtonElement;
     var secondNav = document.querySelector("#secondNav");
     var navbarListItems = document.querySelectorAll("#navbar-list a");
 
     if (hamburger && secondNav && navbarListItems) {
         hamburger.addEventListener("click", function () {
+            hamburger.disabled = true;
+
             hamburger.classList.toggle("is-active");
 
             if (secondNav.classList.contains("-translate-y-full")) {
                 secondNav.classList.remove("-translate-y-full");
                 secondNav.classList.add("translate-y-0");
 
+                let lastItemIndex = navbarListItems.length - 1;
+
                 navbarListItems.forEach((item, index) => {
                     setTimeout(
                         () => {
                             let htmlItem = item as HTMLElement;
                             htmlItem.style.transition = "opacity 0.5s ease";
                             htmlItem.style.opacity = "1";
+
+                            if (index === lastItemIndex) {
+                                setTimeout(() => {
+                                    hamburger.disabled = false;
+                                }, 500);
+                            }
                         },
                         500 + index * 100
                     );
                 });
             } else {
-                navbarListItems.forEach((item) => {
+                navbarListItems.forEach((item, index) => {
                     let htmlItem = item as HTMLElement;
                     htmlItem.style.opacity = "0";
                 });
+
                 setTimeout(() => {
                     secondNav.classList.remove("translate-y-0");
                     secondNav.classList.add("-translate-y-full");
+
+                    setTimeout(() => {
+                        hamburger.disabled = false;
+                    }, 500);
                 }, 500);
             }
         });