responsive navbar

src/components/Navbar.astro

@@ -3,17 +3,17 @@ import navbarPages from "../data/navbarPages.json";
 ---
 
 <div>
-    <div class="bg-black flex justify-between items-center p-2">
+    <div class="bg-black flex justify-between items-center">
-        <div class="h-20 flex items-center">
+        <div class="h-20 flex items-center p-2 z-10 w-auto scale-[85%]">
-            <img src="logos/ieeelogo_full.png" class="h-16" alt="IEEE Logo" />
+            <img src="logos/ieeelogo_full.png" class="h-14" alt="IEEE Logo" />
         </div>
-        <nav class="2xl:flex items-center px-6 hidden">
+        <nav class="xl:block items-center px-6 hidden">
             <ul>
                 {
                     navbarPages.map((page) => (
                         <a
                             href={page.url}
-                            class="text-white hover:text-gray-300 px-3 py-2 rounded-md text-xl"
+                            class="font-extrabold  text-ieee hover:text-gray-300 px-3 py-2 rounded-md text-xl"
                         >
                             {page.name}
                         </a>
@@ -21,7 +21,28 @@ import navbarPages from "../data/navbarPages.json";
                 }
             </ul>
         </nav>
-        <div class="2xl:hidden z-5 mr-2">
+        <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);"
+            id="secondNav"
+        >
+            <ul
+                class="block text-center mt-[80px] mx-auto mb-0 my-auto w-fit"
+                id="navbar-list"
+            >
+                {
+                    navbarPages.map((page) => (
+                        <a
+                            href={page.url}
+                            class=" block font-extrabold text-xl text-ieee hover:text-gray-300 pb-10 rounded-md  opacity-0"
+                        >
+                            {page.name}
+                        </a>
+                    ))
+                }
+            </ul>
+        </nav>
+        <div class="xl:hidden z-5 mr-2 z-10">
             <button
                 class="hamburger hamburger--collapse flex bg-white p-0 m-0"
                 color="#FFFFFF"
@@ -36,17 +57,38 @@ import navbarPages from "../data/navbarPages.json";
 </div>
 
 <script>
-    // Look for .hamburger
     var hamburger = document.querySelector(".hamburger");
-    // Check if hamburger element exists
+    var secondNav = document.querySelector("#secondNav");
-    if (hamburger) {
+    var navbarListItems = document.querySelectorAll("#navbar-list a");
-        // On click
+
+    if (hamburger && secondNav && navbarListItems) {
         hamburger.addEventListener("click", function () {
-            // Toggle class "is-active"
+            hamburger.classList.toggle("is-active");
-            if (hamburger) {
+
-                hamburger.classList.toggle("is-active");
+            if (secondNav.classList.contains("-translate-y-full")) {
+                secondNav.classList.remove("-translate-y-full");
+                secondNav.classList.add("translate-y-0");
+
+                navbarListItems.forEach((item, index) => {
+                    setTimeout(
+                        () => {
+                            let htmlItem = item as HTMLElement;
+                            htmlItem.style.transition = "opacity 0.5s ease";
+                            htmlItem.style.opacity = "1";
+                        },
+                        500 + index * 100
+                    );
+                });
+            } else {
+                navbarListItems.forEach((item) => {
+                    let htmlItem = item as HTMLElement;
+                    htmlItem.style.opacity = "0";
+                });
+                setTimeout(() => {
+                    secondNav.classList.remove("translate-y-0");
+                    secondNav.classList.add("-translate-y-full");
+                }, 500);
             }
-            // Do something else, like open/close menu
         });
     }
 </script>

src/data/navbarPages.json

@@ -1,22 +1,22 @@
 [
     {
-        "name": "Home",
+        "name": "HOME",
         "url": "/"
     },
     {
-        "name": "Events",
+        "name": "EVENTS",
         "url": "/events"
     },
     {
-        "name": "Projects",
+        "name": "PROJECTS",
         "url": "/projects"
     },
     {
-        "name": "Committees",
+        "name": "COMMITTEES",
         "url": "/committees"
     },
     {
-        "name": "Contact Us",
+        "name": "CONTACT US",
-        "url": "/contactus"
+        "url": "/contact"
     }
 ]

tsconfig.json

@@ -1,3 +1,5 @@
 {
-  "extends": "astro/tsconfigs/strict"
+    "compilerOptions": {
-}
+        "allowSyntheticDefaultImports": true
+    }
+}