drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-19 22:51:18 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: scroll bug due to incorrect toggle state (#186)

Browse Source 
* fix: add mobile menu overlay to toggle body scroll

* chore: update styles
This commit is contained in:
Xin
2023-11-03 16:39:36 -04:00
committed by GitHub
parent 088e9f7821
commit 363c8c91ee
4 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
assets/js/menu.js
View File

@ -1,19 +1,49 @@
// Hamburger menu for mobile navigation
const menu = document.querySelector('.hamburger-menu');
menu.addEventListener('click', (e) => {
e.preventDefault();
document.addEventListener('DOMContentLoaded', function () {
const menu = document.querySelector('.hamburger-menu');
const overlay = document.querySelector('.mobile-menu-overlay');
const sidebarContainer = document.querySelector('.sidebar-container');
// Toggle the hamburger menu
menu.querySelector('svg').classList.toggle('open');
// Initialize the overlay
const overlayClasses = ['fixed', 'inset-0', 'z-10', 'bg-black/80', 'dark:bg-black/60'];
overlay.classList.add('bg-transparent');
overlay.classList.remove("hidden", ...overlayClasses);
// When the menu is open, we want to show the navigation sidebar
sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
function toggleMenu() {
// Toggle the hamburger menu
menu.querySelector('svg').classList.toggle('open');
// When the menu is open, we want to prevent the body from scrolling
document.body.classList.toggle('overflow-hidden');
document.body.classList.toggle('md:overflow-auto');
// When the menu is open, we want to show the navigation sidebar
sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
// When the menu is open, we want to prevent the body from scrolling
document.body.classList.toggle('overflow-hidden');
document.body.classList.toggle('md:overflow-auto');
}
menu.addEventListener('click', (e) => {
e.preventDefault();
toggleMenu();
if (overlay.classList.contains('bg-transparent')) {
// Show the overlay
overlay.classList.add(...overlayClasses);
overlay.classList.remove('bg-transparent');
} else {
// Hide the overlay
overlay.classList.remove(...overlayClasses);
overlay.classList.add('bg-transparent');
}
});
overlay.addEventListener('click', (e) => {
e.preventDefault();
toggleMenu();
// Hide the overlay
overlay.classList.remove(...overlayClasses);
overlay.classList.add('bg-transparent');
});
});