ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use data attribute instead of class for mobile navopen.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
assets/js/mobile.js
View file

@ -12,14 +12,14 @@
const toggle = document.querySelector('.mobile-nav__toggle'); const toggle = document.querySelector('.mobile-nav__toggle');
function navopen() { function navopen() {
nav.classList.add('js-nav-open'); nav.dataset.navopen='true';
sheet.setAttribute('aria-hidden', 'false'); sheet.setAttribute('aria-hidden', 'false');
toggle.setAttribute('aria-expanded', 'true'); toggle.setAttribute('aria-expanded', 'true');
document.body.addEventListener('keydown', closeonesc); document.body.addEventListener('keydown', closeonesc);
} }
function navclose() { function navclose() {
nav.classList.remove('js-nav-open'); delete nav.dataset.navopen;
sheet.setAttribute('aria-hidden', 'true'); sheet.setAttribute('aria-hidden', 'true');
toggle.setAttribute('aria-expanded', 'false'); toggle.setAttribute('aria-expanded', 'false');
document.body.removeEventListener('keydown', closeonesc); document.body.removeEventListener('keydown', closeonesc);
@ -37,7 +37,7 @@
toggles.forEach(function (toggle) { toggles.forEach(function (toggle) {
toggle.addEventListener('click', function (e) { toggle.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
if (nav.classList.contains('js-nav-open')) { if (nav.dataset.navopen) {
navclose(); navclose();
} }
else { else {

12
assets/sass/mobile.scss
View file

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