Use data attribute instead of class for mobile navopen.

This commit is contained in:
Fredrik Jonsson 2024-10-18 23:05:53 +02:00
commit 847e2b10ba
2 changed files with 9 additions and 9 deletions

View file

@ -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 {

View file

@ -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;
}
}