Toggle nav using buttons instead of only an open or close action

gopxl · Oct 27, 2024 · c5cf6ff · c5cf6ff
1 parent 03510fd
commit c5cf6ff
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -16,9 +16,7 @@ window.addEventListener('load', function () {
     }
 });
 
-function openMenu() {
-    document.getElementById('sidebar-nav').dataset.open = 'open';
-}
-function closeMenu() {
-    document.getElementById('sidebar-nav').dataset.open = 'closed';
+function toggleMenu() {
+    const nav = document.getElementById('sidebar-nav');
+    nav.dataset.open = nav.dataset.open === 'open' ? 'closed' : 'open';
 }
diff --git a/resources/views/layout.gohtml b/resources/views/layout.gohtml
@@ -17,7 +17,7 @@
 
     <div class="px-8 lg:px-24 py-11 max-w-full">
         <div class="xl:hidden grid grid-cols-3 mb-4">
-            <button onclick="openMenu()" class="justify-self-start self-center -m-2 p-2 fill-white active:fill-primary">
+            <button onclick="toggleMenu()" class="justify-self-start self-center -m-2 p-2 fill-white active:fill-primary">
                 <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title-open-menu">
                     <title id="title-open-menu">Open menu</title>
                     <path d="M1 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM1 8a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1ZM1 15a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1z"/>

diff --git a/resources/views/nav.gohtml b/resources/views/nav.gohtml
@@ -7,7 +7,7 @@
     ">
     <div class="box-content w-64 px-16 py-12">
         <div class="xl:hidden mb-8">
-            <button onclick="closeMenu()" class="fill-white active:fill-primary">
+            <button onclick="toggleMenu()" class="fill-white active:fill-primary">
                 <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title-close-menu">
                     <title id="title-close-menu">Close menu</title>
                     <path d="M4.6966991 2.5753788a1 1 0 0 0-1.4142135 0l-.7071068.7071068a1 1 0 0 0 0 1.4142135L15.303301 17.424621a1 1 0 0 0 1.414213 0l.707107-.707107a1 1 0 0 0 0-1.414213z"/><path d="M17.42462 4.6966996a1 1 0 0 0 0-1.4142135l-.707106-.7071068a1 1 0 0 0-1.414214 0L2.5753788 15.303301a1 1 0 0 0 0 1.414213l.707107.707107a1 1 0 0 0 1.4142132 0z"/>