rename class, simplify condition with ternary

This way it feels easier to read and reduce repetition a little.
HectorVilas · Apr 30, 2023 · c8a0dd9 · c8a0dd9
1 parent 72ba290
commit c8a0dd9
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 13 deletions.
diff --git a/modules/functions.js b/modules/functions.js
@@ -66,9 +66,7 @@ export function goToPage(page) {
 export function toggleNav() {
   const nav = document.querySelector('#navigation');
   const isOpen = !nav.classList.contains('nav-show');
-  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 line = document.querySelectorAll('.menu-button-line');
   const lineDrawMenuClosed = [
     'M 5 10 L 35 10',
     'M 5 20 L 35 20',
@@ -83,11 +81,7 @@ export function toggleNav() {
   ];
   nav.classList.toggle('nav-show');
 
-  [line0, line1, line2].forEach((line, i) => {
-    if (isOpen) {
-      line.setAttribute('d', lineDrawMenuOpen[i]);
-    } else {
-      line.setAttribute('d', lineDrawMenuClosed[i]);
-    };
+  line.forEach((line, i) => {
+    line.setAttribute('d', isOpen ? lineDrawMenuOpen[i] : lineDrawMenuClosed[i]);
   });
 }
diff --git a/modules/header.js b/modules/header.js
@@ -100,7 +100,7 @@ function menuBtn() {
     const line = document.createElementNS(svgNs, 'path');
 
     line.setAttribute('d', lineDraw[i]);
-    line.classList.add(`menu-button-line-${i}`);
+    line.classList.add(`menu-button-line`);
 
     menuBtn.append(line);
   }

diff --git a/styles/header.css b/styles/header.css
@@ -56,9 +56,7 @@ header {
   stroke-linecap: round;
 }
 
-.menu-button-line-0,
-.menu-button-line-1,
-.menu-button-line-2 {
+.menu-button-line {
   transition: d 150ms ease-in-out;
 }