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

* fix: add mobile menu overlay to toggle body scroll

* chore: update styles

Author: imfing

assets/css/compiled/main.css

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

assets/js/menu.js

@@ -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);
+
+  function toggleMenu() {
+    // Toggle the hamburger menu
+    menu.querySelector('svg').classList.toggle('open');
+
+    // 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');
+    }
+  });
 
-  // 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)]');
+  overlay.addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleMenu();
 
-  // 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');
+    // Hide the overlay
+    overlay.classList.remove(...overlayClasses);
+    overlay.classList.add('bg-transparent');
+  });
 });

exampleSite/hugo_stats.json

@@ -67,6 +67,7 @@
       "[counter-reset:step]",
       "[hyphens:auto]",
       "[text-underline-position:from-font]",
+      "[transition:background-color_1.5s_ease]",
       "[word-break:break-word]",
       "absolute",
       "active:bg-gray-400/20",
@@ -90,6 +91,7 @@
       "before:pointer-events-none",
       "before:transition-transform",
       "before:w-px",
+      "bg-black/80",
       "bg-black/[.05]",
       "bg-blue-100",
       "bg-clip-text",
@@ -159,6 +161,7 @@
       "cursor-pointer",
       "dark:before:bg-neutral-800",
       "dark:before:invert",
+      "dark:bg-black/60",
       "dark:bg-blue-900/30",
       "dark:bg-dark",
       "dark:bg-dark/50",
@@ -235,6 +238,7 @@
       "ease-in",
       "filename",
       "first:mt-0",
+      "fixed",
       "flex",
       "flex-col",
       "focus:bg-white",
@@ -311,6 +315,7 @@
       "inline",
       "inline-block",
       "inline-flex",
+      "inset-0",
       "inset-x-0",
       "inset-y-0",
       "items-center",
@@ -401,6 +406,7 @@
       "min-w-full",
       "ml-1",
       "ml-4",
+      "mobile-menu-overlay",
       "mr-2",
       "mt-1",
       "mt-1.5",
@@ -585,6 +591,7 @@
       "w-screen",
       "whitespace-nowrap",
       "xl:block",
+      "z-10",
       "z-20",
       "z-[-1]"
     ],

layouts/partials/sidebar.html

@@ -10,6 +10,7 @@
 {{- $pageURL := $context.RelPermalink -}}
 
 
+<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] fixed inset-0 z-10 bg-black/80 dark:bg-black/60 hidden"></div>
 <aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
   <!-- Search bar on small screen -->
   <div class="px-4 pt-4 md:hidden">