Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests 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

18
assets/css/compiled/main.css
View File

@ -499,6 +499,9 @@ video {
.pointer-events-none {
pointer-events: none;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
@ -508,6 +511,9 @@ video {
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
@ -543,6 +549,9 @@ video {
.top-full {
top: 100%;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
@ -966,6 +975,9 @@ video {
--tw-border-opacity: 1;
border-color: rgb(254 249 195 / var(--tw-border-opacity));
}
.bg-black\/80 {
background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/\[\.05\] {
background-color: rgb(0 0 0 / .05);
}
@ -1399,6 +1411,9 @@ video {
.\[text-underline-position\:from-font\] {
text-underline-position: from-font;
}
.\[transition\:background-color_1\.5s_ease\] {
transition: background-color 1.5s ease;
}
.\[word-break\:break-word\] {
word-break: break-word;
}
@ -2990,6 +3005,9 @@ body {
:is(html[class~="dark"] .dark\:border-yellow-200\/30) {
border-color: rgb(254 240 138 / 0.3);
}
:is(html[class~="dark"] .dark\:bg-black\/60) {
background-color: rgb(0 0 0 / 0.6);
}
:is(html[class~="dark"] .dark\:bg-blue-900\/30) {
background-color: rgb(30 58 138 / 0.3);
}

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');
});
});