Merge pull request #9 from Vortex-Linux/Navbar

Mobile Navbar
Vortex-Linux · Oct 10, 2024 · 9cea0a8 · 9cea0a8
2 parents 58d68ba + f6f4da2
commit 9cea0a8
Show file tree

Hide file tree

Showing 3 changed files with 235 additions and 121 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -7,13 +7,18 @@ import "../styles/Header.css";
 
 <header>
   <div class="header-content">
-    <div class="logo">
-      <a href="/">
+    <button id="menuToggle" class="menu-toggle" aria-label="Toggle menu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+    <div class="logo-container">
+      <a href="/" class="logo">
         <img src={navData.logo} alt={SITE_TITLE} />
-        <span>{SITE_TITLE}</span>
+        <span class="site-title">{SITE_TITLE}</span>
       </a>
     </div>
-    <div class="nav-items">
+    <nav class="nav-items">
       {
         navData.menu.map((item) => (
           <div class="nav-item">
@@ -35,16 +40,17 @@ import "../styles/Header.css";
           </div>
         ))
       }
-    </div>
+    </nav>
     <div class="nav-actions">
       <button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
         <Icon name="mdi:weather-sunny" class="light-icon" />
         <Icon name="mdi:weather-night" class="dark-icon" />
       </button>
-      <a href="#" class="download-button">Download</a>
+      <a href="#" class="download-button desktop-only">Download</a>
     </div>
   </div>
 </header>
+<div id="menuBackdrop" class="menu-backdrop"></div>
 
 <script>
   const theme = (() => {
@@ -57,23 +63,76 @@ import "../styles/Header.css";
     return "light";
   })();
 
-  if (theme === "light") {
-    document.documentElement.classList.remove("dark");
-  } else {
-    document.documentElement.classList.add("dark");
+  function setTheme(newTheme: string) {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(newTheme);
+    localStorage.setItem("theme", newTheme);
   }
 
-  window.localStorage.setItem("theme", theme);
+  setTheme(theme as string);
 
   const handleToggleClick = () => {
-    const element = document.documentElement;
-    element.classList.toggle("dark");
-
-    const isDark = element.classList.contains("dark");
-    localStorage.setItem("theme", isDark ? "dark" : "light");
+    const isDark = document.documentElement.classList.contains("dark");
+    setTheme(isDark ? "light" : "dark");
   };
 
   document
     .getElementById("themeToggle")
     ?.addEventListener("click", handleToggleClick);
+
+  const menuToggle = document.getElementById("menuToggle");
+  const navItems = document.querySelector(".nav-items");
+  const menuBackdrop = document.getElementById("menuBackdrop");
+
+  menuToggle?.addEventListener("click", () => {
+    navItems?.classList.toggle("open");
+    menuToggle.classList.toggle("active");
+    menuBackdrop?.classList.toggle("active");
+    document.body.classList.toggle("menu-open");
+  });
+
+  menuBackdrop?.addEventListener("click", () => {
+    navItems?.classList.remove("open");
+    menuToggle?.classList.remove("active");
+    menuBackdrop.classList.remove("active");
+    document.body.classList.remove("menu-open");
+    document.querySelectorAll(".nav-item").forEach((item) => {
+      item.classList.remove("dropdown-open");
+    });
+  });
+
+  const dropdownToggles = document.querySelectorAll(".nav-item > a");
+  dropdownToggles.forEach((toggle) => {
+    toggle.addEventListener("click", (e) => {
+      if (window.innerWidth <= 768 && toggle.nextElementSibling) {
+        e.preventDefault();
+        const parentItem = toggle.parentElement;
+        parentItem?.classList.toggle("dropdown-open");
+
+        // Close other open dropdowns
+        dropdownToggles.forEach((otherToggle) => {
+          const otherParentItem = otherToggle.parentElement;
+          if (
+            otherParentItem !== parentItem &&
+            otherParentItem?.classList.contains("dropdown-open")
+          ) {
+            otherParentItem.classList.remove("dropdown-open");
+          }
+        });
+      }
+    });
+  });
+
+  window.addEventListener("resize", () => {
+    if (window.innerWidth > 768) {
+      navItems?.classList.remove("open");
+      menuToggle?.classList.remove("active");
+      menuBackdrop?.classList.remove("active");
+      document.body.classList.remove("menu-open");
+      document.querySelectorAll(".nav-item").forEach((item) => {
+        item.classList.remove("dropdown-open");
+      });
+    }
+  });
 </script>
diff --git a/src/content/data/navData.js b/src/content/data/navData.js
@@ -12,7 +12,7 @@ export const navData = {
       path: "#",
       children: [
         { title: "About", href: "/about" },
-        { title: "Forum", href: "https://forum.vortexlinux.org" },
+        // { title: "Forum", href: "https://forum.vortexlinux.org" }, for future use
         { title: "Get Involved", href: "/blog/get-invovled" },
         { title: "GitHub", href: "https://github.com/Vortex-Linux/" },
         {