convert burger button on a cross when menu is open

HectorVilas · Apr 29, 2023 · 44a752f · 44a752f
1 parent 5469c76
commit 44a752f
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/modules/functions.js b/modules/functions.js
@@ -65,5 +65,30 @@ export function goToPage(page) {
 
 export function toggleNav() {
   const nav = document.querySelector('#navigation');
+  const isOpen = !nav.classList.contains('nav-show');
+  const navBtn = document.querySelector('#menu-button');
+  const line0 = document.querySelector('.menu-button-line-0');
+  const line1 = document.querySelector('.menu-button-line-1');
+  const line2 = document.querySelector('.menu-button-line-2');
+  const lineDrawMenuClosed = [
+    'M 5 10 L 35 10',
+    'M 5 20 L 35 20',
+    'M 5 30 L 35 30',
+  ];
+  const closedLeft = 8;
+  const closedRight = 27;
+  const lineDrawMenuOpen = [
+    `M ${closedLeft} ${closedLeft} L ${closedRight} ${closedRight}`,
+    `M 20 20 L 20 20`,
+    `M ${closedLeft} ${closedRight} L ${closedRight} ${closedLeft}`,
+  ];
   nav.classList.toggle('nav-show');
+
+  [line0, line1, line2].forEach((line, i) => {
+    if (isOpen) {
+      line.setAttribute('d', lineDrawMenuOpen[i]);
+    } else {
+      line.setAttribute('d', lineDrawMenuClosed[i]);
+    };
+  });
 }