fix(Home): mobile menu ux

assets/development/scripts/home.js

@@ -14,7 +14,16 @@ let mosaic = document.getElementById('mosaic');
 let mosaicHeader = document.getElementById('mosaic-header');
 let tags = []
 
+let navEnablerExists = false
+
+function closeMenu() {
+  navEnablerText.textContent = oldNavText;
+  navEnablerIcon.style.transform = "rotate(0deg)";
+  navContent.style.maxHeight = null;
+}
+
 navEnabler.onclick = async () => {
+  navEnablerExists = true
   if (!navOpened) {
     // open the menu
     oldNavText = navEnablerText.textContent;
@@ -22,12 +31,9 @@ navEnabler.onclick = async () => {
     navEnablerIcon.style.transform = "rotate(90eg)";
     navContent.style.maxHeight = navContent.scrollHeight + "px";
   } else {
-    // close the menu
-    navEnablerText.textContent = oldNavText;
-    navEnablerIcon.style.transform = "rotate(0deg)";
-    navContent.style.maxHeight = null;
+    closeMenu()
   }
-  navOpened = !navOpened;
+  navOpened = !navOpened
 }
 
 function createEl(className = false, elName = "div") {
@@ -155,6 +161,7 @@ let currentTag = null
 let currentCardContainer = null
 
 function enableTag(node) {
+
   let all = node.id === 'nav-all'
   let tagId = ""
   if (!all) {
@@ -180,6 +187,15 @@ function enableTag(node) {
   } else {
     mosaicHeader.textContent = data.length + " associations listées"
   }
+
+  // close the menu if on mobile
+  if (navEnablerExists) {
+    setTimeout(() => {
+      navOpened = !navOpened
+      closeMenu()
+      location.hash = "#nav-content"
+    }, 200)
+  }
 }
 
 /***