From 45153c2fbd2d79308542e2297b4f0c2127505423 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 8 Feb 2025 06:01:19 -0800
Subject: [PATCH 1/5] add new subpages structure

---
 src/data/pages.json | 62 +++++++++++++++++++++++++++------------------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/data/pages.json b/src/data/pages.json
index 20ac665..a209981 100644
--- a/src/data/pages.json
+++ b/src/data/pages.json
@@ -1,26 +1,40 @@
 [
-    {
-        "name": "Join",
-        "path": "/join"
-    },
-    {
-        "name": "Events",
-        "path": "/events"
-    },
-    {
-        "name": "Projects",
-        "path": "/projects"
-    },
-    {
-        "name": "Board",
-        "path": "/board"
-    },
-    {
-        "name": "Find Us",
-        "path": "/find"
-    },
-    {
-        "name": "Online Store",
-        "path": "/online-store"
-    }
+  {
+    "name": "Join",
+    "path": "/join"
+  },
+  {
+    "name": "Events",
+    "path": "/events"
+  },
+  {
+    "name": "Projects",
+    "path": "/projects",
+    "subpages": [
+      {
+        "name": "Robocup",
+        "path": "/projects/robocup"
+      },
+      {
+        "name": "Signal Processing",
+        "path": "/projects/signal-processing"
+      },
+      {
+        "name": "Supercomputing",
+        "path": "/projects/supercomputing"
+      }
+    ]
+  },
+  {
+    "name": "Board",
+    "path": "/board"
+  },
+  {
+    "name": "Find Us",
+    "path": "/find"
+  },
+  {
+    "name": "Online Store",
+    "path": "/online-store"
+  }
 ]

From fe187034c865e3c386203fbc7c5bc3d6c61c58ab Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 8 Feb 2025 06:01:29 -0800
Subject: [PATCH 2/5] add support for dropdown

---
 src/components/core/Navbar.astro | 364 ++++++++++++++++++++-----------
 1 file changed, 233 insertions(+), 131 deletions(-)

diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index 89dd7dc..0cb148a 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -5,150 +5,252 @@ import pages from "../../data/pages.json";
 ---
 
 <div class="w-full">
-  <div
-    class="flex justify-between items-center bg-ieee-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] rounded-full md:border-[0.1vw]"
-  >
-    <a href="/" class="hover:opacity-60 duration-300">
-      <Image
-        class="w-[15vw] md:block hidden"
-        src={whiteLogoHorizontal}
-        alt="IEEE UCSD Logo"
-      />
-      <Image
-        class="w-[40vw] md:hidden block"
-        src={whiteLogoHorizontal}
-        alt="IEEE UCSD Logo"
-      />
-    </a>
-
-    <!-- Desktop Navigation -->
-    <div class="hidden md:flex md:w-[55%] md:justify-between">
-      {
-        pages.map((page) => (
-          <a
-            href={page.path}
-            class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
-                            ${
-                              page.name === "Online Store"
-                                ? "bg-ieee-yellow text-black hover:opacity-70"
-                                : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
-                            }`}
-          >
-            {page.name}
-          </a>
-        ))
-      }
-    </div>
-
-    <!-- Mobile Hamburger/Close Button -->
-    <button
-      id="menu-btn"
-      class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
-      aria-label="Toggle menu"
-    >
-      <!-- Hamburger Icon -->
-      <svg
-        class="w-6 h-6 menu-icon"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M4 6h16M4 12h16M4 18h16"></path>
-      </svg>
-      <!-- Close Icon -->
-      <svg
-        class="w-6 h-6 close-icon hidden"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M6 18L18 6M6 6l12 12"></path>
-      </svg>
-    </button>
-  </div>
-
-  <!-- Mobile Menu -->
-  <div
-    id="mobile-menu"
-    class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
-  >
     <div
-      class="flex flex-col items-center min-h-screen justify-center bg-black py-20 px-4 space-y-8"
+        class="flex justify-between items-center bg-ieee-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] rounded-full md:border-[0.1vw]"
     >
-      {
-        pages.map((page) => (
-          <a
-            href={page.path}
-            class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
-                            ${
-                              page.name === "Online Store"
-                                ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
-                                : "text-white hover:text-gray-300 border-white border-2"
-                            }`}
-          >
-            {page.name}
-          </a>
-        ))
-      }
+        <a href="/" class="hover:opacity-60 duration-300">
+            <Image
+                class="w-[15vw] md:block hidden"
+                src={whiteLogoHorizontal}
+                alt="IEEE UCSD Logo"
+            />
+            <Image
+                class="w-[40vw] md:hidden block"
+                src={whiteLogoHorizontal}
+                alt="IEEE UCSD Logo"
+            />
+        </a>
+
+        <!-- Desktop Navigation -->
+        <div class="hidden md:flex md:w-[55%] md:justify-between">
+            {
+                pages.map((page) =>
+                    page.subpages ? (
+                        <div class="relative group">
+                            <a
+                                href={page.path}
+                                class="uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap text-white border-white hover:opacity-50 border-[0.1vw] font-light inline-block"
+                            >
+                                {page.name}
+                            </a>
+                            <div class="absolute left-1/2 transform -translate-x-1/2 top-full pt-2 w-64 z-50">
+                                <div class="rounded-lg bg-ieee-black border border-white shadow-lg hidden group-hover:block animate-fade-down animate-duration-200 animate-ease-in-out">
+                                    {page.subpages.map((subpage) => (
+                                        <a
+                                            href={subpage.path}
+                                            class="block px-6 py-3 text-white hover:bg-gray-700 text-[1vw] first:rounded-t-lg last:rounded-b-lg text-center whitespace-nowrap transition-colors duration-200"
+                                        >
+                                            {subpage.name}
+                                        </a>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
+                        <a
+                            href={page.path}
+                            class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
+                              ${
+                                  page.name === "Online Store"
+                                      ? "bg-ieee-yellow text-black hover:opacity-70"
+                                      : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
+                              }`}
+                        >
+                            {page.name}
+                        </a>
+                    )
+                )
+            }
+        </div>
+
+        <!-- Mobile Hamburger/Close Button -->
+        <button
+            id="menu-btn"
+            class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
+            aria-label="Toggle menu"
+        >
+            <!-- Hamburger Icon -->
+            <svg
+                class="w-6 h-6 menu-icon"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
+            <!-- Close Icon -->
+            <svg
+                class="w-6 h-6 close-icon hidden"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+    </div>
+
+    <!-- Mobile Menu -->
+    <div
+        id="mobile-menu"
+        class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full bg-black"
+    >
+        <div
+            class="flex flex-col items-center min-h-screen w-full justify-center py-20 px-4 space-y-6 overflow-y-auto"
+        >
+            {
+                pages.map((page) =>
+                    page.subpages ? (
+                        <div class="w-full max-w-md space-y-4">
+                            <div class="flex gap-2">
+                                <a
+                                    href={page.path}
+                                    class="flex-1 block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl text-white hover:text-gray-300 border-white border-2"
+                                >
+                                    {page.name}
+                                </a>
+                                <button
+                                    class="mobile-dropdown-toggle py-4 px-6 text-center rounded-[3rem] motion-safe:transition-all motion-safe:duration-200 uppercase font-bold text-2xl text-white hover:text-gray-300 border-white border-2 flex items-center justify-center"
+                                    aria-expanded="false"
+                                >
+                                    <svg
+                                        class="w-6 h-6 transform transition-transform duration-200 dropdown-icon"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M19 9l-7 7-7-7"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                            <div class="mobile-dropdown-content hidden mt-2 space-y-2 pl-4">
+                                {page.subpages.map((subpage) => (
+                                    <a
+                                        href={subpage.path}
+                                        class="block py-3 px-8 text-center rounded-[2rem] motion-safe:transition-all motion-safe:duration-200 uppercase font-medium text-lg w-full text-white hover:text-gray-300 border-white border bg-[#111111] hover:bg-[#222222]"
+                                    >
+                                        {subpage.name}
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <a
+                            href={page.path}
+                            class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
+                              ${
+                                  page.name === "Online Store"
+                                      ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
+                                      : "text-white hover:text-gray-300 border-white border-2"
+                              }`}
+                        >
+                            {page.name}
+                        </a>
+                    )
+                )
+            }
+        </div>
     </div>
-  </div>
 </div>
 
 <style>
-  #mobile-menu.show {
-    @apply translate-x-0;
-  }
+    #mobile-menu.show {
+        @apply translate-x-0;
+    }
+
+    .mobile-dropdown-content {
+        max-height: 0;
+        transition: max-height 0.3s ease-out;
+    }
+
+    .mobile-dropdown-content.show {
+        max-height: 500px;
+        transition: max-height 0.5s ease-in;
+    }
+
+    .dropdown-icon.rotated {
+        transform: rotate(180deg);
+    }
 </style>
 
 <script>
-  const menuBtn = document.getElementById("menu-btn");
-  const mobileMenu = document.getElementById("mobile-menu");
-  const menuIcon = document.querySelector(".menu-icon");
-  const closeIcon = document.querySelector(".close-icon");
+    const menuBtn = document.getElementById("menu-btn");
+    const mobileMenu = document.getElementById("mobile-menu");
+    const menuIcon = document.querySelector(".menu-icon");
+    const closeIcon = document.querySelector(".close-icon");
+    const dropdownToggles = document.querySelectorAll(
+        ".mobile-dropdown-toggle"
+    );
 
-  function toggleMenu(show: boolean) {
-    if (show) {
-      mobileMenu?.classList.remove("hidden");
-      menuIcon?.classList.add("hidden");
-      closeIcon?.classList.remove("hidden");
-      document.body.style.overflow = "hidden";
+    function toggleMenu(show: boolean) {
+        if (show) {
+            mobileMenu?.classList.remove("hidden");
+            menuIcon?.classList.add("hidden");
+            closeIcon?.classList.remove("hidden");
+            document.body.style.overflow = "hidden";
 
-      setTimeout(() => {
-        mobileMenu?.classList.add("show");
-      }, 10);
-    } else {
-      mobileMenu?.classList.remove("show");
-      menuIcon?.classList.remove("hidden");
-      closeIcon?.classList.add("hidden");
-      document.body.style.overflow = "";
+            setTimeout(() => {
+                mobileMenu?.classList.add("show");
+            }, 10);
+        } else {
+            mobileMenu?.classList.remove("show");
+            menuIcon?.classList.remove("hidden");
+            closeIcon?.classList.add("hidden");
+            document.body.style.overflow = "";
 
-      setTimeout(() => {
-        mobileMenu?.classList.add("hidden");
-      }, 100);
+            setTimeout(() => {
+                mobileMenu?.classList.add("hidden");
+            }, 300);
+        }
     }
-  }
 
-  menuBtn?.addEventListener("click", () => {
-    const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
-    toggleMenu(isMenuHidden);
-  });
+    menuBtn?.addEventListener("click", () => {
+        const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
+        toggleMenu(isMenuHidden);
+    });
 
-  // Close menu when clicking outside
-  document.addEventListener("click", (e) => {
-    if (
-      !mobileMenu?.contains(e.target as Node) &&
-      !menuBtn?.contains(e.target as Node) &&
-      !mobileMenu?.classList.contains("hidden")
-    ) {
-      toggleMenu(false);
-    }
-  });
+    // Handle dropdown toggles
+    dropdownToggles.forEach((toggle) => {
+        toggle.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const content = toggle.parentElement
+                ?.nextElementSibling as HTMLElement;
+            const icon = toggle.querySelector(".dropdown-icon");
+
+            // Toggle aria-expanded
+            const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+            toggle.setAttribute("aria-expanded", (!isExpanded).toString());
+
+            // Toggle content visibility
+            if (content) {
+                content.classList.toggle("hidden");
+                content.classList.toggle("show");
+                icon?.classList.toggle("rotated");
+            }
+        });
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener("click", (e) => {
+        if (
+            !mobileMenu?.contains(e.target as Node) &&
+            !menuBtn?.contains(e.target as Node) &&
+            !mobileMenu?.classList.contains("hidden")
+        ) {
+            toggleMenu(false);
+        }
+    });
 </script>

From d981716f21653e4ddb9d3251b772cc87d7c3056f Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 8 Feb 2025 06:08:40 -0800
Subject: [PATCH 3/5] add popout animation

---
 src/components/core/Navbar.astro | 98 +++++++++++++++++++++++++++-----
 1 file changed, 85 insertions(+), 13 deletions(-)

diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index 0cb148a..93e1ee8 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -109,7 +109,7 @@ import pages from "../../data/pages.json";
             {
                 pages.map((page) =>
                     page.subpages ? (
-                        <div class="w-full max-w-md space-y-4">
+                        <div class="w-full max-w-md space-y-4 relative dropdown-container">
                             <div class="flex gap-2">
                                 <a
                                     href={page.path}
@@ -136,7 +136,7 @@ import pages from "../../data/pages.json";
                                     </svg>
                                 </button>
                             </div>
-                            <div class="mobile-dropdown-content hidden mt-2 space-y-2 pl-4">
+                            <div class="mobile-dropdown-content hidden mt-2 space-y-2 pl-4 absolute w-full">
                                 {page.subpages.map((subpage) => (
                                     <a
                                         href={subpage.path}
@@ -173,17 +173,60 @@ import pages from "../../data/pages.json";
 
     .mobile-dropdown-content {
         max-height: 0;
-        transition: max-height 0.3s ease-out;
+        opacity: 0;
+        pointer-events: none;
+        transition: all 0.3s ease-out;
+        z-index: 30;
     }
 
     .mobile-dropdown-content.show {
-        max-height: 500px;
-        transition: max-height 0.5s ease-in;
+        max-height: none;
+        opacity: 1;
+        pointer-events: all;
+        transition: all 0.3s ease-in;
     }
 
     .dropdown-icon.rotated {
         transform: rotate(180deg);
     }
+
+    /* Add styles for focus effect */
+    .dropdown-container {
+        transition: all 0.3s ease;
+        position: relative;
+    }
+
+    .dropdown-container.active {
+        transform: scale(1.02);
+        z-index: 25;
+    }
+
+    .dropdown-container.active .mobile-dropdown-toggle,
+    .dropdown-container.active > div > a {
+        position: relative;
+        z-index: 25;
+        pointer-events: all;
+    }
+
+    .dropdown-container.active::after {
+        content: "";
+        position: fixed;
+        inset: 0;
+        background: transparent;
+        z-index: 15;
+        pointer-events: none;
+    }
+
+    #mobile-menu.has-active-dropdown > div > *:not(.dropdown-container.active) {
+        opacity: 0.3;
+        transform: scale(0.98);
+        transition: all 0.3s ease;
+        pointer-events: none;
+    }
+
+    #mobile-menu.has-active-dropdown .dropdown-container.active {
+        pointer-events: all;
+    }
 </style>
 
 <script>
@@ -226,20 +269,49 @@ import pages from "../../data/pages.json";
     dropdownToggles.forEach((toggle) => {
         toggle.addEventListener("click", (e) => {
             e.stopPropagation();
+            const container = toggle.closest(".dropdown-container");
             const content = toggle.parentElement
                 ?.nextElementSibling as HTMLElement;
             const icon = toggle.querySelector(".dropdown-icon");
-
-            // Toggle aria-expanded
             const isExpanded = toggle.getAttribute("aria-expanded") === "true";
-            toggle.setAttribute("aria-expanded", (!isExpanded).toString());
 
-            // Toggle content visibility
-            if (content) {
-                content.classList.toggle("hidden");
-                content.classList.toggle("show");
-                icon?.classList.toggle("rotated");
+            // If clicking an already active dropdown, close it and restore interactions
+            if (isExpanded) {
+                container?.classList.remove("active");
+                mobileMenu?.classList.remove("has-active-dropdown");
+                content?.classList.add("hidden");
+                content?.classList.remove("show");
+                icon?.classList.remove("rotated");
+                toggle.setAttribute("aria-expanded", "false");
+                return;
             }
+
+            // Remove active state from all dropdowns first
+            document.querySelectorAll(".dropdown-container").forEach((el) => {
+                el.classList.remove("active");
+                const dropdownContent = el.querySelector(
+                    ".mobile-dropdown-content"
+                );
+                const dropdownToggle = el.querySelector(
+                    ".mobile-dropdown-toggle"
+                );
+                const dropdownIcon =
+                    dropdownToggle?.querySelector(".dropdown-icon");
+
+                dropdownContent?.classList.add("hidden");
+                dropdownContent?.classList.remove("show");
+                dropdownIcon?.classList.remove("rotated");
+                dropdownToggle?.setAttribute("aria-expanded", "false");
+            });
+            mobileMenu?.classList.remove("has-active-dropdown");
+
+            // Activate the clicked dropdown
+            container?.classList.add("active");
+            mobileMenu?.classList.add("has-active-dropdown");
+            content?.classList.remove("hidden");
+            content?.classList.add("show");
+            icon?.classList.add("rotated");
+            toggle.setAttribute("aria-expanded", "true");
         });
     });
 

From 17a24f8ff3935c3299462a0bf7a14c94bd54f25f Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 8 Feb 2025 06:23:42 -0800
Subject: [PATCH 4/5] add blur and animations

---
 src/components/core/Navbar.astro | 94 +++++++++++++++++++++++++-------
 1 file changed, 74 insertions(+), 20 deletions(-)

diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index 93e1ee8..7ec4f8f 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -136,7 +136,7 @@ import pages from "../../data/pages.json";
                                     </svg>
                                 </button>
                             </div>
-                            <div class="mobile-dropdown-content hidden mt-2 space-y-2 pl-4 absolute w-full">
+                            <div class="mobile-dropdown-content mt-2 space-y-2 pl-4 absolute w-full animate-duration-200 animate-ease-in-out">
                                 {page.subpages.map((subpage) => (
                                     <a
                                         href={subpage.path}
@@ -172,18 +172,46 @@ import pages from "../../data/pages.json";
     }
 
     .mobile-dropdown-content {
-        max-height: 0;
         opacity: 0;
         pointer-events: none;
-        transition: all 0.3s ease-out;
         z-index: 30;
+        width: calc(100% - 1rem) !important;
+        animation: fadeOut 0.2s ease-in-out forwards;
     }
 
     .mobile-dropdown-content.show {
-        max-height: none;
         opacity: 1;
         pointer-events: all;
-        transition: all 0.3s ease-in;
+        backdrop-filter: none;
+        animation: fadeIn 0.2s ease-in-out forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+    }
+
+    .mobile-dropdown-content a {
+        margin-inline: auto;
+        width: 100% !important;
+        max-width: calc(100% - 1rem);
     }
 
     .dropdown-icon.rotated {
@@ -194,11 +222,15 @@ import pages from "../../data/pages.json";
     .dropdown-container {
         transition: all 0.3s ease;
         position: relative;
+        isolation: isolate;
     }
 
     .dropdown-container.active {
         transform: scale(1.02);
         z-index: 25;
+        backdrop-filter: none;
+        filter: none;
+        transition: all 0.2s ease;
     }
 
     .dropdown-container.active .mobile-dropdown-toggle,
@@ -206,26 +238,42 @@ import pages from "../../data/pages.json";
         position: relative;
         z-index: 25;
         pointer-events: all;
+        backdrop-filter: none;
+        filter: none;
+        transition: all 0.2s ease;
     }
 
     .dropdown-container.active::after {
         content: "";
         position: fixed;
         inset: 0;
-        background: transparent;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(4px);
         z-index: 15;
         pointer-events: none;
+        transition: all 0.3s ease;
     }
 
     #mobile-menu.has-active-dropdown > div > *:not(.dropdown-container.active) {
-        opacity: 0.3;
+        opacity: 0.2;
         transform: scale(0.98);
-        transition: all 0.3s ease;
+        filter: blur(2px);
+        transition: all 0.2s ease;
         pointer-events: none;
     }
 
     #mobile-menu.has-active-dropdown .dropdown-container.active {
         pointer-events: all;
+        filter: none;
+        transition: all 0.2s ease;
+    }
+
+    #mobile-menu.has-active-dropdown
+        .dropdown-container.active
+        .mobile-dropdown-content.show {
+        filter: none;
+        backdrop-filter: none;
+        background: transparent;
     }
 </style>
 
@@ -277,18 +325,21 @@ import pages from "../../data/pages.json";
 
             // If clicking an already active dropdown, close it and restore interactions
             if (isExpanded) {
-                container?.classList.remove("active");
-                mobileMenu?.classList.remove("has-active-dropdown");
-                content?.classList.add("hidden");
+                // First close the dropdown
                 content?.classList.remove("show");
                 icon?.classList.remove("rotated");
-                toggle.setAttribute("aria-expanded", "false");
+
+                // Then wait for animation to complete plus a delay before removing focus
+                setTimeout(() => {
+                    container?.classList.remove("active");
+                    mobileMenu?.classList.remove("has-active-dropdown");
+                    toggle.setAttribute("aria-expanded", "false");
+                }, 300); // 200ms for animation + 100ms delay
                 return;
             }
 
             // Remove active state from all dropdowns first
             document.querySelectorAll(".dropdown-container").forEach((el) => {
-                el.classList.remove("active");
                 const dropdownContent = el.querySelector(
                     ".mobile-dropdown-content"
                 );
@@ -298,24 +349,27 @@ import pages from "../../data/pages.json";
                 const dropdownIcon =
                     dropdownToggle?.querySelector(".dropdown-icon");
 
-                dropdownContent?.classList.add("hidden");
                 dropdownContent?.classList.remove("show");
                 dropdownIcon?.classList.remove("rotated");
                 dropdownToggle?.setAttribute("aria-expanded", "false");
             });
-            mobileMenu?.classList.remove("has-active-dropdown");
 
-            // Activate the clicked dropdown
+            // First focus the new dropdown
             container?.classList.add("active");
             mobileMenu?.classList.add("has-active-dropdown");
-            content?.classList.remove("hidden");
-            content?.classList.add("show");
-            icon?.classList.add("rotated");
             toggle.setAttribute("aria-expanded", "true");
+            icon?.classList.add("rotated");
+
+            // Then show the content with animation after a short delay
+            setTimeout(() => {
+                requestAnimationFrame(() => {
+                    content?.classList.add("show");
+                });
+            }, 100);
         });
     });
 
-    // Close menu when clicking outside
+    // Close menu when clicking outside ~ Doesnt really work at the moment
     document.addEventListener("click", (e) => {
         if (
             !mobileMenu?.contains(e.target as Node) &&

From b6e6cc2549cdafb226f063a64b0410f2499c8b44 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 8 Feb 2025 06:25:09 -0800
Subject: [PATCH 5/5] Resets mobile navbar on close

---
 src/components/core/Navbar.astro | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index 7ec4f8f..40f2110 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -302,8 +302,29 @@ import pages from "../../data/pages.json";
             closeIcon?.classList.add("hidden");
             document.body.style.overflow = "";
 
+            // First wait for the navbar to slide out
             setTimeout(() => {
                 mobileMenu?.classList.add("hidden");
+
+                // Then reset all dropdowns and focus states
+                document
+                    .querySelectorAll(".dropdown-container")
+                    .forEach((el) => {
+                        const dropdownContent = el.querySelector(
+                            ".mobile-dropdown-content"
+                        );
+                        const dropdownToggle = el.querySelector(
+                            ".mobile-dropdown-toggle"
+                        );
+                        const dropdownIcon =
+                            dropdownToggle?.querySelector(".dropdown-icon");
+
+                        el.classList.remove("active");
+                        dropdownContent?.classList.remove("show");
+                        dropdownIcon?.classList.remove("rotated");
+                        dropdownToggle?.setAttribute("aria-expanded", "false");
+                    });
+                mobileMenu?.classList.remove("has-active-dropdown");
             }, 300);
         }
     }