diff --git a/assets/js/cookieconsent.js b/assets/js/cookieconsent.js index 326593c..4b4512b 100644 --- a/assets/js/cookieconsent.js +++ b/assets/js/cookieconsent.js @@ -11,10 +11,7 @@ cookiebanner.classList.add('js-cookieconsent-open'); } - const cookie_buttons = Array.prototype.slice.call( - document.querySelectorAll('button[data-consent]') - ); - + const cookie_buttons = document.querySelectorAll('button[data-consent]'); cookie_buttons.forEach(function (button) { button.addEventListener('click', function () { if (button.getAttribute('data-consent') === 'true') { diff --git a/assets/js/mobile.js b/assets/js/mobile.js index b805e33..d3dc93a 100644 --- a/assets/js/mobile.js +++ b/assets/js/mobile.js @@ -3,19 +3,46 @@ * A JavaScript file for the mobile menu. */ -(function ($) { +(function () { 'use strict'; + const body = document.querySelector('body'); + const sheet = document.querySelector('.mobile-nav__sheet'); + const toggle = document.querySelector('.mobile-nav__toggle'); + + function navopen () { + body.classList.add('js-nav-open'); + sheet.setAttribute('aria-hidden', 'false'); + toggle.setAttribute('aria-expanded', 'true'); + } + + function navclose () { + body.classList.remove('js-nav-open'); + sheet.setAttribute('aria-hidden', 'true'); + toggle.setAttribute('aria-expanded', 'false'); + } + // Toggle the mobile nav sheet. - $('.mobile-nav__cover, .mobile-nav__toggle').handle('click', function () { - $('body').scroll().toggleClass('js-nav-open'); + const toggles = document.querySelectorAll('.mobile-nav__cover, .mobile-nav__toggle'); + toggles.forEach(function (toggle) { + toggle.addEventListener('click', function (e) { + e.preventDefault(); + if (body.classList.contains('js-nav-open')) { + navclose (); + } + else { + navopen (); + } + }); }); // Close the nav sheet after click (needed for anchor links). - $('.mobile-nav__sheet').find('a').on('click', function () { - $('body').removeClass('js-nav-open'); + const links = document.querySelectorAll('.mobile-nav__sheet a'); + links.forEach(function (link) { + link.addEventListener('click', function (e) { + navclose (); + }); }); -})(u); - +})(); diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss index 98d8512..9327968 100644 --- a/assets/sass/mobile.scss +++ b/assets/sass/mobile.scss @@ -11,7 +11,7 @@ @include respond-to(s) { display: block; } -} +} // stylelint-enable selector-class-pattern .mobile-nav { @include typeface(headings); @@ -46,18 +46,18 @@ } &__toggle { - display: block; + @include padding(0 .2); + display: flex; + align-items: center; position: absolute; top: $zen-gutters; right: $zen-gutters; - padding: 6px 30px 6px 6px; - z-index: 22; - text-decoration: none; + margin: 0; font-weight: bold; - line-height: 1; - border: 1px solid var(--color-border); - border-radius: $s-radius; + background-color: transparent; color: var(--color-text); + z-index: 22; + border: 1px solid var(--color-border); pointer-events: auto; @include respond-to(s) { @@ -68,22 +68,45 @@ color: var(--color-text-bg); } - &::after { - position: absolute; - content: ''; - margin-left: 4px; - width: 20px; - height: 20px; - border-top: 12px double var(--color-text); - border-bottom: 4px solid var(--color-text); - } - - .js-nav-open &::after { - border-color: var(--color-text-bg); + &:hover svg, + &:focus svg { + fill: var(--color-text-bg); } } + &__hamburger { + display: inline-block; + fill: var(--color-text); + width: 1.6rem; + margin-left: 0.1rem; + + rect { + transform-origin: center; + } + + .js-nav-open & { // stylelint-disable max-nesting-depth + fill: var(--color-text-bg); + + rect { + y: 45; + + &:nth-of-type(1) { + transform: rotate(45deg); + } + + &:nth-of-type(2) { + opacity: 0; + } + + &:nth-of-type(3) { + transform: rotate(-45deg); + } + } + } // stylelint-enable max-nesting-depth + } + &__sheet { + visibility: hidden; background-color: var(--color-mobile-menu); width: 90vw; height: 100vh; @@ -102,6 +125,7 @@ } .js-nav-open & { + visibility: visible; pointer-events: auto; box-shadow: -10px 0 10px -10px var(--color-nearblack); transform: translateX(10vw); @@ -122,7 +146,7 @@ &__cover, &__toggle, - &__toggle::after, + &__hamburger rect, &__sheet { transition: all 130ms ease-in; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 283e81e..21bc220 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -23,6 +23,7 @@ {{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end -}} {{ if $.Param "menuinheader" }}{{ partial "menu.html" . }}{{ end -}} +{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}} {{ if not ($.Param "menuinheader") }}{{ partial "menu.html" . }}{{ end -}} @@ -40,6 +41,5 @@ {{ if $.Param "cookieconsent" }}{{ partial "cookieconsent.html" . }}{{ end -}} -{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}} diff --git a/layouts/partials/language-selector.html b/layouts/partials/language-selector.html index d4263a3..ac5e04e 100644 --- a/layouts/partials/language-selector.html +++ b/layouts/partials/language-selector.html @@ -1,5 +1,4 @@ -

{{ i18n "lang_select_title" }}

-