From 76ca138982bf4dbe48e3d53c0e1faff3ab24dd8c Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 21 Dec 2024 02:44:20 -0800
Subject: [PATCH] add mobile support

---
 src/components/Navbar.astro | 168 +++++++++++++++++++++++++++++-------
 1 file changed, 139 insertions(+), 29 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 03a1d5b..b8692c2 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -5,36 +5,146 @@ import pages from "../data/pages.json";
 ---
 
 <div class="flex items-center">
-  <div
-    class="flex flex-col border-white-500 border-2 bg-ieee_navigation_bg w-[98%] h-full mt-3 mx-auto rounded-[4rem] py-3"
-  >
-    <div class="flex justify-between items-center mx-6">
-      <div class="flex min-h-[1rem] max-h-[3rem]">
-        <Image
-          src={whiteLogoHorizontal}
-          alt="IEEE UCSD Logo"
-          width={300}
-          height={300}
-        />
-      </div>
+    <div
+        class="flex flex-col border-white-500 shadow-md shadow-ieee_blue bg-nav_bg w-[98%] h-full mt-3 mx-auto rounded-[4rem] py-3"
+    >
+        <div class="flex justify-between items-center mx-6">
+            <div class="flex min-h-[1rem] max-h-[3rem]">
+                <Image
+                    src={whiteLogoHorizontal}
+                    alt="IEEE UCSD Logo"
+                    width={300}
+                    height={300}
+                />
+            </div>
 
-      <div class="flex gap-6">
-        {
-          pages.map((page) => (
-            <a
-              href={page.path}
-              class={`uppercase border-2 px-4 py-2 rounded-[3rem] transition-colors duration-200 
-								${
-                  page.name === "Online Store"
-                    ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
-                    : "text-white border-white hover:text-gray-300"
-                }`}
+            <!-- Desktop Navigation -->
+            <div class="hidden xl:flex gap-6">
+                {
+                    pages.map((page) => (
+                        <a
+                            href={page.path}
+                            class={`uppercase font-bold text-xl px-2 py-2 rounded-[3rem] transition-colors duration-200 
+                                ${
+                                    page.name === "Online Store"
+                                        ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
+                                        : "text-white border-white hover:text-gray-300"
+                                }`}
+                        >
+                            {page.name}
+                        </a>
+                    ))
+                }
+            </div>
+
+            <!-- Mobile Hamburger/Close Button -->
+            <button
+                id="menu-btn"
+                class="xl:hidden text-white p-2 focus:outline-none relative z-[60] scale-150"
+                aria-label="Toggle menu"
             >
-              {page.name}
-            </a>
-          ))
-        }
-      </div>
+                <!-- 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>
+    </div>
+
+    <!-- Mobile Menu -->
+    <div
+        id="mobile-menu"
+        class="fixed inset-0 bg-nav_bg bg-opacity-95 z-[51] hidden xl:hidden transition-transform duration-300 transform translate-x-full"
+    >
+        <div class="flex flex-col items-center justify-center h-full space-y-6">
+            {
+                pages.map((page) => (
+                    <a
+                        href={page.path}
+                        class={`block py-2 px-8 text-center rounded-[3rem] transition-colors duration-200 uppercase font-bold text-xl
+                            ${
+                                page.name === "Online Store"
+                                    ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
+                                    : "text-white hover:text-gray-300  border-white"
+                            }`}
+                    >
+                        {page.name}
+                    </a>
+                ))
+            }
+        </div>
     </div>
-  </div>
 </div>
+
+<style>
+    #mobile-menu.show {
+        transform: translateX(0);
+    }
+</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");
+
+    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("hidden");
+            }, 300);
+        }
+    }
+
+    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);
+        }
+    });
+</script>