From c922a737038d0cdd6395863b87bcf9d23848b62a Mon Sep 17 00:00:00 2001
From: LimePotato <nelle@limepot.xyz>
Date: Wed, 17 Apr 2024 04:55:55 -0600
Subject: [PATCH] 202404170455

---
 src/components/Header.astro | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index bb27a96..a81d803 100644
--- a/src/components/Header.astro
+++ b/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>
\ No newline at end of file
+<!-- 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 -->