1 files changed, 30 insertions, 14 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2290bd7..7e76126 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,20 +1,36 @@
 <nav>
-  <div class="d-flex flex-row mt-2 border-bottom">
-    <div class="navMenu mr-2">
-      <a href="{{ `/` | relURL }}"><i title="Home" class="fas fa-home"></i></a>
-    </div>
-
-    <div class="dropdown">
-      <p class="navMenu ml-2 mr-2 dropbtn">
-        <i class="fas fa-book"></i>
-      </p>
-      <div class="dropdown-content p-2 bg-light shadow">
-        {{ partial "bookMenu" . }}
-      </div>
-    </div>
-
+  <div class="d-flex flex-row mt-2 border-bottom position-relative">
+    <a href="{{ `/` | relURL }}"
+      ><i title="Home" class="nav-menu mr-2 mt-1 fas fa-home"></i
+    ></a>
+    {{ partial "bookMenu" . }}
+    {{ if eq .Kind "page" }}
+    {{ partial "chapterMenu" . }}
+    {{ end }}
     <div class="w-100 text-right">
       {{ partial "footer" . }}
     </div>
   </div>
 </nav>
+<script>
+  let expandMenu = function(x) {
+    Array.from(document.querySelectorAll(".hover-menu")).forEach(hovermenu => {
+      hovermenu.nextElementSibling.style.maxHeight = "0px";
+    });
+    let thisMenu = x.nextElementSibling;
+    thisMenu.style.maxHeight = thisMenu.scrollHeight + "px";
+  };
+  window.onclick = function(event) {
+    let insideMenu = false;
+    Array.from(document.querySelectorAll(".show")).forEach(menu => {
+      insideMenu = insideMenu || menu.contains(event.target);
+    });
+    if (!insideMenu && !event.target.matches(".hover-menu")) {
+      Array.from(document.querySelectorAll(".hover-menu")).forEach(
+        hovermenu => {
+          hovermenu.nextElementSibling.style.maxHeight = "0px";
+        }
+      );
+    }
+  };
+</script>