Changed menu behaviour for small screens

4 files changed, 76 insertions, 52 deletions

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index a468577..f0d5014 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,10 +1,7 @@
 <div class="header">
   <nav id="main-nav" class="standard">
     <div class="hamburger-icon">
-      <i
-        class="hamburger fas fa-bars"
-        onclick="toggleDisplay(this.parentNode.nextElementSibling)"
-      ></i>
+      <i class="hamburger fas fa-bars" onclick="toggleMainMenu(this)"></i>
     </div>
     <div class="all-menu expanded w-100">
       {{ partial "menu/menu_home" . }}
@@ -15,25 +12,48 @@
   </nav>
 </div>
 <script>
+  let toggleDisplay = function(elem) {
+    elem.classList.toggle("d-none");
+  };
+  let toggleMainMenu = function(x) {
+    toggleDisplay(x.parentNode.nextElementSibling);
+    document.querySelector(".hamburger").classList.toggle("fa-bars");
+    document.querySelector(".hamburger").classList.toggle("fa-times");
+    if (document.querySelector(".dropdown-content")) {
+      resetSectionMenu();
+      zeroHeight(document.querySelector(".dropdown-content"));
+    }
+  };
+  let resetMainMenu = function() {
+    document.querySelector(".hamburger").classList.add("fa-bars");
+    document.querySelector(".hamburger").classList.remove("fa-times");
+  };
   function smMenu(x) {
     let allMenu = document.querySelector(".all-menu");
     let dropDown = document.querySelector(".dropdown-content");
     if (x.matches) {
       allMenu.classList.add("d-none");
       allMenu.style.flexDirection = "column";
-      dropDown.style.width = "calc(90vw - 5px)";
-      dropDown.style.maxHeight = "0px";
-      dropDown.style.position = "static";
-    } else {
-      dropDown.style.width = "auto";
+      if (dropDown) {
+        resetSectionMenu();
+        dropDown.style.width = "calc(90vw - 4.5px)";
+        dropDown.style.maxHeight = "0px";
+        dropDown.style.position = "static";
+      }
+      resetMainMenu();
+    } else {      
       allMenu.classList.remove("d-none");
       allMenu.style.flexDirection = "row";
-      dropDown.style.maxHeight = "0px";
-      dropDown.style.position = "absolute";
+      if (dropDown) {
+        dropDown.style.width = "auto";
+        resetSectionMenu();
+        dropDown.style.maxHeight = "0px";
+        dropDown.style.position = "absolute";
+      }
+      resetMainMenu();
     }
   }
-
-  let x = window.matchMedia("(max-width: 750px)");
-  smMenu(x); // Call listener function at run time
-  x.addListener(smMenu); // Attach listener function on state changes
+  let vw = window.matchMedia("(max-width: 750px)");
+  smMenu(vw); // Call listener function at run time
+  vw.addListener(smMenu); // Attach listener function on state changes
 </script>
diff --git a/layouts/partials/menu/menu_sections.html b/layouts/partials/menu/menu_sections.html
index 01d86f7..0640f7a 100644
--- a/layouts/partials/menu/menu_sections.html
+++ b/layouts/partials/menu/menu_sections.html
@@ -6,8 +6,8 @@
 </div>
 {{ else }}
 <div class="dropdown main-menu">
-  <span class="dropbtn" onclick="toggleHeight(this.nextElementSibling)">
-    Sections <i class="fas fa-chevron-down"></i>
+  <span class="dropbtn" onclick="toggleSectionMenu(this)">
+    Sections <i class="section-menu fas fa-chevron-down"></i>
   </span>
   <div class="dropdown-content">
     <div class="rounded bg-light mt-2">
@@ -19,7 +19,44 @@
         </li>
         {{ end }}
       </ul>
-  </div>
+    </div>
   </div>
 </div>
+<script>
+  let toggleHeight = function(elem) {
+    if (getComputedStyle(elem)["height"] === "0px") {
+      elem.style.maxHeight = elem.scrollHeight + 5 + "px";
+    } else {
+      elem.style.maxHeight = "0px";
+    }
+  };
+  let toggleSectionMenu = function(x) {
+    toggleHeight(x.nextElementSibling);
+    document.querySelector(".section-menu").classList.toggle("fa-chevron-down");
+    document.querySelector(".section-menu").classList.toggle("fa-chevron-up");
+  };
+  let resetSectionMenu = function() {
+    document.querySelector(".section-menu").classList.add("fa-chevron-down");
+    document.querySelector(".section-menu").classList.remove("fa-chevron-up");
+  };
+  let zeroHeight = function(elem) {
+    elem.style.maxHeight = "0px";
+  };
+  let checkClick = function() {
+    if (!document.querySelector(".dropdown").contains(event.target)) {
+      zeroHeight(document.querySelector(".dropdown-content"));
+      resetSectionMenu();
+    }
+  };
+  window.onclick = function() {
+    if (!vw.matches) {
+      checkClick();
+    }
+  };
+  window.ontouchstart = function() {
+    if (!vw.matches) {
+      checkClick();
+    }
+  };
+</script>
 {{ end }}
diff --git a/static/css/khata.css b/static/css/khata.css
index e00c0ce..16c33a2 100644
--- a/static/css/khata.css
+++ b/static/css/khata.css
@@ -58,10 +58,6 @@ a,
   color: white !important;
   cursor: pointer;
 }
-.hamburger:active {
-  color: #2f16ac !important;
-  background-color: white;
-}
 .main-menu {
   font-variant: small-caps;
   font-family: "Open Sans", sans-serif;
diff --git a/static/js/khata.js b/static/js/khata.js
index 6dcba90..8b13789 100644
--- a/static/js/khata.js
+++ b/static/js/khata.js
@@ -1,30 +1 @@
-let toggleHeight = function(elem) {
-  if (getComputedStyle(elem)["height"] === "0px") {
-    elem.style.maxHeight = elem.scrollHeight + 5 +"px";
-  } else {
-    elem.style.maxHeight = "0px";
-  }
-};
-let toggleDisplay = function(elem) {
-  elem.classList.toggle("d-none");
-};
-let zeroHeight = function(elem) {
-  elem.style.maxHeight = "0px";
-};
-let checkClick = function() {
-  if (!document.querySelector(".dropdown").contains(event.target)) {
-    zeroHeight(document.querySelector(".dropdown-content"));
-  }
-  if (
-    window.matchMedia("(max-width: 750px)").matches &&
-    !document.querySelector("nav").contains(event.target)
-  ) {
-    document.querySelector(".all-menu").classList.add("d-none");
-  }
-};
-window.onclick = function() {
-  checkClick();
-};
-window.ontouchstart = function() {
-  checkClick();
-};
+