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

Add mobile bottom navigation with local Lucide icons and improved accessibility

Browse source 
- Add local Lucide icon system (5 optimized icons)
- Create Apple-style bottom navigation bar (fixed at bottom on mobile)
- Add language toggle (replaces dropdown selector)
- Improve theme support with proper light/dark mode colors
- Add comprehensive ARIA labels and semantic HTML
- Hide main menu on mobile (≤666px) when bottom nav is active
- Add hreflang attributes for language switching

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Vincent Mahnke 2026-11-07 13:39:10 +01:00
commit 945820ec5b
Signed by: ViMaSter
GPG key ID: 6D787326BA7D6469
1 changed files with 71 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

61
assets/js/mobilemenu.js
View file

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