hide/show mobile menu (#29)

PlanBee-dev · Aug 6, 2023 · c5b2a71 · c5b2a71
1 parent 7469eb5
commit c5b2a71
Showing 1 changed file with 28 additions and 17 deletions.
diff --git a/packages/site/src/components/Header.astro b/packages/site/src/components/Header.astro
@@ -7,6 +7,13 @@ if (!headerText) {
 }
 ---
 
+<script>
+  const button = document.querySelector('#mobile-menu-button');
+  button.addEventListener('click', () => {
+    const menu = document.querySelector('#mobile-menu');
+    menu.classList.toggle('hidden');
+  });
+</script>
 <header>
   <nav class="border-b border-gray-200 bg-white">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -46,6 +53,7 @@ if (!headerText) {
             class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
             aria-controls="mobile-menu"
             aria-expanded="false"
+            id="mobile-menu-button"
           >
             <span class="sr-only">Open main menu</span>
             <!-- Menu open: "hidden", Menu closed: "block" -->
@@ -85,23 +93,26 @@ if (!headerText) {
       </div>
     </div>
     <!-- Mobile menu, show/hide based on menu state. -->
-    <div class="sm:hidden" id="mobile-menu">
-      <div class="space-y-1 pb-3 pt-2">
-        <HeaderLink
-          href={import.meta.env.BASE_URL}
-          linkDescription="Home"
-          isMobile="true"
-        />
-        <HeaderLink
-          href={`${import.meta.env.BASE_URL}meetups`}
-          linkDescription="Meetups"
-          isMobile="true"
-        />
-        <HeaderLink
-          href={`${import.meta.env.BASE_URL}submit`}
-          linkDescription="Submit your own"
-          isMobile="true"
-        />
+
+    <div class="sm:hidden">
+      <div class="hidden" id="mobile-menu">
+        <div class="space-y-1 pb-3 pt-2">
+          <HeaderLink
+            href={import.meta.env.BASE_URL}
+            linkDescription="Home"
+            isMobile="true"
+          />
+          <HeaderLink
+            href={`${import.meta.env.BASE_URL}meetups`}
+            linkDescription="Meetups"
+            isMobile="true"
+          />
+          <HeaderLink
+            href={`${import.meta.env.BASE_URL}submit`}
+            linkDescription="Submit your own"
+            isMobile="true"
+          />
+        </div>
       </div>
     </div>
   </nav>