202404170455

src/components/Header.astro

@@ -13,6 +13,17 @@
       -->
       <span class="text-gradient">LimePot</span>
     </a>
+    <a
+      role="button"
+      class="navbar-burger"
+      data-target="navMenu"
+      aria-label="menu"
+      aria-expanded="false"
+    >
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
   </div>
   <div class="navbar-menu" id="navMenu">
     <div class="navbar-start">
@@ -42,4 +53,28 @@
   </a>
   -->
 </div>
-</center>
+<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(
+      document.querySelectorAll(".navbar-burger"),
+      0
+    );
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach((el) => {
+      el.addEventListener("click", () => {
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle("is-active");
+        $target.classList.toggle("is-active");
+      });
+    });
+  });
+</script>
+</center>
+<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->