Merge pull request #1716 from nunocoracao/1695-update-mobile-menu-logic-to-rely-on-js

✨ Update mobile menu logic to rely on JS

assets/css/compiled/main.css

@@ -3182,21 +3182,6 @@ body button {
   display:none
 }
 
-/* Hamburger menu */
-
-body:has(#menu-controller:checked) {
-  overflow-y:hidden
-}
-
-#menu-button:has(#menu-controller:checked) {
-  visibility:hidden
-}
-
-#menu-controller:checked~#menu-wrapper {
-  visibility:visible;
-  opacity:1
-}
-
 /* RTL support */
 
 .prose blockquote:where([dir="rtl"], [dir="rtl"] *) {

assets/css/main.css

@@ -29,19 +29,6 @@ body button {
   @apply hidden;
 }
 
-/* Hamburger menu */
-body:has(#menu-controller:checked) {
-  @apply overflow-y-hidden;
-}
-
-#menu-button:has(#menu-controller:checked) {
-  @apply invisible;
-}
-
-#menu-controller:checked~#menu-wrapper {
-  @apply visible opacity-100;
-}
-
 /* RTL support */
 .prose blockquote {
   @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;

assets/js/mobilemenu.js

@@ -0,0 +1,27 @@
+var menuButton = document.getElementById("menu-button");
+var menuCloseButton = document.getElementById("menu-close-button");
+
+var menuOpen = false;
+
+menuButton.addEventListener("click", function () {
+  if (!menuOpen) {
+    menuOpen = true;
+    var menuWrapper = document.getElementById("menu-wrapper");
+    document.body.style.overflowY = "hidden";
+    menuButton.style.visibility = "hidden";
+    menuWrapper.style.visibility = "visible";
+    menuWrapper.style.opacity = "1";
+  }
+});
+
+menuCloseButton.addEventListener("click", function (e) {
+  if (menuOpen) {
+    menuOpen = false;
+    var menuWrapper = document.getElementById("menu-wrapper");
+    document.body.style.overflowY = "auto";
+    menuButton.style.visibility = "visible";
+    menuWrapper.style.visibility = "hidden";
+    menuWrapper.style.opacity = "0";
+    e.stopPropagation();
+  }
+});

layouts/partials/head.html

@@ -66,6 +66,8 @@
   {{ $jsRTL := resources.Get "js/rtl.js" }}
   {{ $assets.Add "js" (slice $jsRTL) }}
   {{ end }}
+  {{ $jsMobileMenu := resources.Get "js/mobilemenu.js" }}
+  {{ $assets.Add "js" (slice $jsMobileMenu) }}
   {{ if $assets.Get "js" }}
   {{ $bundleJS := $assets.Get "js" | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint
   "sha512" }}

layouts/partials/header/basic.html

@@ -93,8 +93,7 @@
     </div>
     <div class="-my-2 -mr-2 md:hidden">
 
-        <label id="menu-button" for="menu-controller" class="block">
+        <label id="menu-button" class="block">
-            <input type="checkbox" id="menu-controller" class="hidden" />
             {{ if .Site.Menus.main }}
             <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
                 {{ partial "icon.html" "bars" }}
@@ -104,7 +103,7 @@
                 <ul
                     class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
 
-                    <li>
+                    <li id="menu-close-button">
                         <span
                             class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{
                             partial