fix menu responsive layout

2 files changed, 6 insertions, 4 deletions

diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 5ac29fa4..39a77c8e 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -27,13 +27,14 @@ function onAuxClick(selector, callback, noPreventDefault) {
 
 // Show and hide the main menu on mobile devices.
 function toggleMainMenu() {
+    console.log("clc")
     let menu = document.querySelector(".header nav ul");
-    let menuToggleButton = document.querySelector(".header .logo a");
-    if (DomHelper.isVisible(menu)) {
-        menu.style.display = "none";
+    let menuToggleButton = document.querySelector(".header button[aria-controls='header-menu']");
+    if (menu.classList.contains("js-menu-show")) {
+        menu.classList.remove("js-menu-show")
         menuToggleButton.setAttribute("aria-expanded", false)
     } else {
-        menu.style.display = "block";
+        menu.classList.add("js-menu-show")
         menuToggleButton.setAttribute("aria-expanded", true)
     }
 }
diff --git a/internal/ui/static/js/bootstrap.js b/internal/ui/static/js/bootstrap.js
index 3c815f2b..dc23ada7 100644
--- a/internal/ui/static/js/bootstrap.js
+++ b/internal/ui/static/js/bootstrap.js
@@ -112,6 +112,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }, true);
 
+    onClick("button[aria-controls='header-menu']", () => toggleMainMenu());
     if (document.documentElement.clientWidth < 600) {
         onClick(".header nav li", (event) => onClickMainMenuListItem(event));
     }