Use data attribute instead of class for mobile navopen.

frjo · Oct 18, 2024 · 847e2b1 · 847e2b1
1 parent 76ab47f
commit 847e2b1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/assets/js/mobile.js b/assets/js/mobile.js
@@ -12,14 +12,14 @@
   const toggle = document.querySelector('.mobile-nav__toggle');
 
   function navopen() {
-    nav.classList.add('js-nav-open');
+    nav.dataset.navopen='true';
     sheet.setAttribute('aria-hidden', 'false');
     toggle.setAttribute('aria-expanded', 'true');
     document.body.addEventListener('keydown', closeonesc);
   }
 
   function navclose() {
-    nav.classList.remove('js-nav-open');
+    delete nav.dataset.navopen;
     sheet.setAttribute('aria-hidden', 'true');
     toggle.setAttribute('aria-expanded', 'false');
     document.body.removeEventListener('keydown', closeonesc);
@@ -37,7 +37,7 @@
   toggles.forEach(function (toggle) {
     toggle.addEventListener('click', function (e) {
       e.preventDefault();
-      if (nav.classList.contains('js-nav-open')) {
+      if (nav.dataset.navopen) {
         navclose();
       }
       else {

diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
@@ -26,7 +26,7 @@
     display: none;
   }
 
-  &.js-nav-open {
+  &[data-navopen] {
     position: fixed;
   }
 
@@ -41,7 +41,7 @@
     background-color: var(--color-mobile-menu-cover);
     opacity: 0;
 
-    .js-nav-open & {
+    [data-navopen] & {
       opacity: 1;
       pointer-events: auto;
     }
@@ -89,7 +89,7 @@
       transform-origin: center;
     }
 
-    .js-nav-open & { // stylelint-disable max-nesting-depth
+    [data-navopen] & { // stylelint-disable max-nesting-depth
       rect {
         y: 45px;
 
@@ -117,7 +117,7 @@
     transform: translateX(100vw);
     z-index: 21;
 
-    .js-nav-open & {
+    [data-navopen] & {
       visibility: visible;
       pointer-events: auto;
       box-shadow: -10px 0 10px -10px var(--color-nearblack);
@@ -149,13 +149,13 @@
 
   &__cover,
   &__toggle,
-  &__hamburger rect,
+  &__hamburger > rect,
   &__sheet {
     // Add some transitions unless user prefer less motion.
     @media (prefers-reduced-motion: no-preference) {
       transition: all 130ms ease-in;
 
-      .js-nav-open & {
+      [data-navopen] & {
         transition: all 330ms ease-out;
       }
     }