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)
+  }
 }
 
 /***

assets/development/styles/home.css

@@ -165,6 +165,7 @@
 .mosaic {
   background: white;
   width: 100%;
+  padding-bottom: .25em;
 }
 
 .mosaic-header {
@@ -332,6 +333,11 @@
     max-height: 0;
     transition: max-height 0.1s ease-out;
   }
+
+  .before-container {
+    overflow: hidden;
+  }
+
   .nav-item {
     width: auto;
   }
@@ -346,6 +352,7 @@
   }
   .mosaic-header {
     text-align: center;
+    margin-bottom: 1em;
   }
   .card {
     display: block;
@@ -355,6 +362,7 @@
     margin: 0;
     border-right: 0;
     border-bottom: 1px solid #C4C4C4;
+    overflow: hidden;
   }
   .card-content {
     width: auto;

views/base.twig

@@ -49,11 +49,13 @@ Github: https://github.com/lefuturiste
           </div>
         </div>
       </div>
+      <div class="before-container">
         <div class="container">
           <div class="content">
             {% block content %}{% endblock %}
           </div>
         </div>
+      </div>
     {% else %}
       {% block content %}{% endblock %}
     {% endif %}