diff --git a/assets/css/_colors.css b/assets/css/_colors.css index c6eeeff..b724228 100644 --- a/assets/css/_colors.css +++ b/assets/css/_colors.css @@ -97,7 +97,7 @@ --color-backdrop: light-dark(var(--color-black-60), var(--color-black-80)); /* Mobil menu colours. */ - --color-mobile-menu: light-dark(var(--color-brand-400), var(--color-brand-400)); + --color-mobile-menu: light-dark(var(--color-white), var(--color-brand-400)); --color-mobile-menu-cover: light-dark(var(--color-black-20), var(--color-black-20)); /* Form colours. */ diff --git a/assets/css/mobilemenu.css b/assets/css/mobilemenu.css index cebe93c..29759b5 100644 --- a/assets/css/mobilemenu.css +++ b/assets/css/mobilemenu.css @@ -1,142 +1,94 @@ /* The mobile navigation stylesheet for this theme. */ @layer mobilemenu { - .mobile-nav { - position: absolute; + .mobile-bottom-nav { + position: fixed; + bottom: 0; + left: 0; right: 0; - top: 0; - width: 100vw; - height: 100dvh; - overflow: hidden; - font-family: var(--ff-headings); - z-index: 20; - pointer-events: none; - - &[data-navopen] { - position: fixed; - } - - .language-icon { - fill: var(--color-text-bg); - } - } - - .mobile-nav__cover { - position: absolute; - width: 100vw; - height: 100dvh; - background-color: var(--color-mobile-menu-cover); - backdrop-filter: blur(3px); - opacity: 0; - - [data-navopen] & { - opacity: 1; - pointer-events: auto; - } - } - - .mobile-nav__toggle { - display: flex; - align-items: center; - position: absolute; - top: var(--gutters); - right: var(--gutters); - padding: 0 0.3rem; - border-color: var(--color-button-text-hover); - z-index: 22; - pointer-events: auto; - - &:hover, - &:focus-visible, - &:active { - svg { - fill: var(--color-button-text-hover); - } - } - } - - .mobile-nav__hamburger { - fill: var(--color-button-text); - width: 1.6rem; - margin-inline-start: 0.1rem; - - .button--outline & { - fill: var(--color-button); - } - - rect { - transform-origin: center; - } - - [data-navopen] & { - rect { - y: 45px; - - &:nth-of-type(1) { - transform: rotate(45deg); - } - - &:nth-of-type(2) { - opacity: 0; - } - - &:nth-of-type(3) { - transform: rotate(-45deg); - } - } - } - } - - .mobile-nav__sheet { - visibility: hidden; + width: 100%; background-color: var(--color-mobile-menu); - width: 90vw; - height: 100vh; - padding: 2.25rem; - transform: translateX(100vw); - z-index: 21; + border-top: 1px solid var(--color-border); + z-index: 20; + font-family: var(--ff-headings); + display: none; + } - [data-navopen] & { - visibility: visible; - pointer-events: auto; - box-shadow: -10px 0 10px -10px var(--color-nearblack); - transform: translateX(10vw); + @media (max-width: 666px) { + .mobile-bottom-nav { + display: block; + } + + body { + padding-bottom: 5rem; } } - .mobile-nav__region { - &:not(:empty) { - margin-block-end: 0.5rem; - } + .mobile-bottom-nav__list { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 5rem; + list-style: none; } - .mobile-nav__navbar { + .mobile-bottom-nav__item { + list-style: none; + flex: 1; + display: flex; + justify-content: center; + height: 100%; + } + + .mobile-bottom-nav__link { display: flex; flex-direction: column; - padding-inline-start: 0; - margin-block: 0; + align-items: center; + justify-content: center; + gap: 0.25rem; + padding: 0.5rem; + color: light-dark(var(--color-black), var(--color-grey-300)); + background: none; + border: none; + cursor: pointer; + text-decoration: none; + font-size: 0.7rem; + font-weight: 500; + transition: color 150ms ease; + width: 100%; + height: 100%; - li { - list-style: none; + .icon { + width: 1.5rem; + height: 1.5rem; + flex-shrink: 0; + display: block; + color: inherit; } - a { - display: inline-block; - padding-block: 0.5rem; + &:hover, + &:focus-visible { + color: light-dark(var(--color-black), var(--color-white)); + outline: none; + } + + &[aria-current="page"] { + color: var(--color-link); + font-weight: 600; } } - .mobile-nav__cover, - .mobile-nav__toggle, - .mobile-nav__hamburger > rect, - .mobile-nav__sheet { - /* Add some transitions unless user prefer less motion. */ - @media (prefers-reduced-motion: no-preference) { - transition: all 130ms ease-in; - - [data-navopen] & { - transition: all 330ms ease-out; - } - } + .mobile-bottom-nav__label { + display: block; + line-height: 1; } } + + + + + + diff --git a/assets/js/mobilemenu.js b/assets/js/mobilemenu.js index 3a18d49..52dfade 100644 --- a/assets/js/mobilemenu.js +++ b/assets/js/mobilemenu.js @@ -1,67 +1,16 @@ /** * @file - * A JavaScript file for the mobile menu. + * A JavaScript file for the mobile bottom navigation menu. */ (function () { + // Hide the main menu on small screens const main_menu = document.querySelector('.main-menu'); const header_region = document.querySelector('.header__region'); - const nav = document.querySelector('.mobile-nav'); - const sheet = document.querySelector('.mobile-nav__sheet'); - const toggle = document.querySelector('.mobile-nav__toggle'); - - // Switch to mobil menu on small screens. - // The mobile menu depends on js so we use js to activate it. const small_screen = window.matchMedia('(max-width: 666px)').matches; + if (small_screen) { - main_menu.hidden = true; - header_region.hidden = true; - nav.hidden = false; - } - - function navopen() { - nav.dataset.navopen = 'true'; - sheet.setAttribute('aria-hidden', 'false'); - toggle.setAttribute('aria-expanded', 'true'); - document.body.addEventListener('keydown', closeonesc); - } - - function navclose() { - delete nav.dataset.navopen; - sheet.setAttribute('aria-hidden', 'true'); - toggle.setAttribute('aria-expanded', 'false'); - document.body.removeEventListener('keydown', closeonesc); - } - - // Close the nav sheet with "esc" key. - function closeonesc(e) { - if (e.key === 'Escape') { - navclose(); - } - } - - // Toggle the mobile nav sheet. - const toggles = document.querySelectorAll('.mobile-nav__cover, .mobile-nav__toggle'); - toggles.forEach(function (toggle) { - toggle.addEventListener('click', function (e) { - e.preventDefault(); - if (nav.dataset.navopen) { - navclose(); - } else { - navopen(); - } - }); - }); - - // Close the nav sheet after click (needed for anchor links). - const links = document.querySelectorAll('.mobile-nav__sheet a'); - links.forEach(function (link) { - link.addEventListener('click', () => navclose()); - }); - - // Move focus back to button efter user tab out of last link. - if (links.length) { - const lastlink = [].slice.call(links).pop(); - lastlink.addEventListener('blur', () => toggle.focus()); + if (main_menu) main_menu.hidden = true; + if (header_region) header_region.hidden = true; } })();