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

Adjustments to the mobile menu.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-02-27 13:46:29 +01:00
commit 37218ed069
2 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
assets/js/mobile.js
View file

@ -7,18 +7,18 @@
'use strict'; 'use strict';
const body = document.querySelector('body'); const nav = document.querySelector('.mobile-nav');
const sheet = document.querySelector('.mobile-nav__sheet'); const sheet = document.querySelector('.mobile-nav__sheet');
const toggle = document.querySelector('.mobile-nav__toggle'); const toggle = document.querySelector('.mobile-nav__toggle');
function navopen() { function navopen() {
body.classList.add('js-nav-open'); nav.classList.add('js-nav-open');
sheet.setAttribute('aria-hidden', 'false'); sheet.setAttribute('aria-hidden', 'false');
toggle.setAttribute('aria-expanded', 'true'); toggle.setAttribute('aria-expanded', 'true');
} }
function navclose() { function navclose() {
body.classList.remove('js-nav-open'); nav.classList.remove('js-nav-open');
sheet.setAttribute('aria-hidden', 'true'); sheet.setAttribute('aria-hidden', 'true');
toggle.setAttribute('aria-expanded', 'false'); toggle.setAttribute('aria-expanded', 'false');
} }
@ -28,7 +28,7 @@
toggles.forEach(function (toggle) { toggles.forEach(function (toggle) {
toggle.addEventListener('click', function (e) { toggle.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
if (body.classList.contains('js-nav-open')) { if (nav.classList.contains('js-nav-open')) {
navclose(); navclose();
} }
else { else {

12
assets/sass/mobile.scss
View file

@ -26,7 +26,7 @@
display: none; display: none;
} }
.js-nav-open & { &.js-nav-open {
position: fixed; position: fixed;
} }
@ -136,12 +136,16 @@
&__navbar { &__navbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding-left: 0;
margin: 0; margin-block: 0;
li { li {
list-style: none; list-style: none;
margin: .4rem 0; }
a {
display: inline-block;
padding-block: .5rem;
} }
} }