From 8247ef5a1b869f80179817da1e8789fcafb253d4 Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Wed, 19 Jun 2019 20:56:35 -0700
Subject: js to replace css hover menu because iOS

---
 layouts/partials/navbar.html |  4 ++--
 static/css/mero.css          |  1 -
 static/js/mero.js            | 24 ++++++++++++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index b224a56..f514c6f 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -7,11 +7,11 @@
       <a href="{{ `/` | relURL }}"><span>Home</span> </a>
     </div>
     <div class="menu-item dropdown border border-warning bg-dark p-2">
-      <span class="dropbtn text-warning"
+      <span class="dropbtn text-warning" onclick="toggleMenu(this)"
         >Sections <i class="fas fa-angle-down"></i
       ></span>
       <div
-        class="dropdown-content p-2 bg-dark2 mt-2 rounded w-auto mt-1"
+        class="dropdown-content p-2 bg-dark2 mt-2 rounded w-auto mt-1 d-none"
         style="min-width: 200px;"
       >
         <ul class="list-unstyled">
diff --git a/static/css/mero.css b/static/css/mero.css
index f5ecef6..d2052fa 100644
--- a/static/css/mero.css
+++ b/static/css/mero.css
@@ -50,7 +50,6 @@ a:hover {
   color: #a57e09 !important;
 }
 .dropdown-content {
-  display: none;
   position: absolute;
   white-space: nowrap;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
diff --git a/static/js/mero.js b/static/js/mero.js
index 0746922..262f64a 100644
--- a/static/js/mero.js
+++ b/static/js/mero.js
@@ -6,3 +6,27 @@ setColors = function() {
   imagecaption.forEach(elem => elem.classList.add("initialism"));
 };
 window.onload = setColors;
+
+let toggleMenu = function(x) {
+  let elem = x.nextElementSibling;
+  if (elem.classList.contains("d-none")) {
+    elem.classList.remove("d-none");
+  } else {
+    elem.classList.add("d-none");
+  }
+};
+let checkClick = function() {
+  let menuContainer = document.querySelector(".dropdown-content");
+  if (
+    !menuContainer.contains(event.target) &&
+    !document.querySelector(".dropdown").contains(event.target)
+  ) {
+    menuContainer.classList.add("d-none");
+  }
+};
+window.onclick = function() {
+  checkClick();
+};
+window.ontouchstart = function() {
+  checkClick();
+};
-- 
cgit v1.2.3