From 9a7441889c82bc56eed0a3721580900b7d9d980c Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Sun, 9 Jun 2019 17:39:40 -0700
Subject: Converted menu to hover type

---
 layouts/partials/bookMenu.html    | 27 +++++++++++++--------------
 layouts/partials/chapterMenu.html | 34 ++++++++++++++++------------------
 layouts/partials/header.html      | 32 +++++++++++++++++++++++++++++---
 layouts/partials/navbar.html      | 16 ----------------
 static/css/kitab.css              | 32 +++++++++++++++++++++++++++++++-
 static/js/myFunctions.js          | 32 --------------------------------
 6 files changed, 89 insertions(+), 84 deletions(-)
 delete mode 100644 layouts/partials/navbar.html

diff --git a/layouts/partials/bookMenu.html b/layouts/partials/bookMenu.html
index 8d13d87..4c30cab 100644
--- a/layouts/partials/bookMenu.html
+++ b/layouts/partials/bookMenu.html
@@ -1,14 +1,13 @@
-<div class="menuItems d-none">
-  <ul class="list-unstyled">
-    {{ range .Site.Sections }}
-    <li>
-      <a href="{{ .Permalink }}">
-        <h2 class="mb-0 mt-3">
-          {{ .Title |markdownify }}
-        </h2>
-      </a>
-      <p>by {{ .Params.author }}</p>
-    </li>
-    {{ end }}
-  </ul>
-</div>
+<b>
+  Books
+</b>
+<ul class="list-unstyled ml-1">
+  {{ range .Site.Sections }}
+  <li class="hanging">
+    <a href="{{ .Permalink }}">
+      {{ .Title |markdownify }}
+    </a>
+    by {{ .Params.author }}
+  </li>
+  {{ end }}
+</ul>
diff --git a/layouts/partials/chapterMenu.html b/layouts/partials/chapterMenu.html
index a7c53f3..48a5db7 100644
--- a/layouts/partials/chapterMenu.html
+++ b/layouts/partials/chapterMenu.html
@@ -1,18 +1,16 @@
-<div class="chapters d-none">
-  <h2 class='mt-3'>
-    {{ $thisSection := .Site.GetPage "section" .Section }}
-    {{ with $thisSection }}
-    {{ .Title | markdownify }}
-    {{ end }}
-  </h2>
-  <ul class="list-unstyled ml-3 mb-0 mt-0">
-    {{ $mypages := intersect (where .Site.Pages "Section" .Section) (where .Site.Pages "Kind" "page") }}
-    {{ range $mypages }}
-    <li>
-      <a href="{{ .Permalink }}"
-        ><h4>{{ .Title | markdownify}}</h4></a
-      >
-    </li>
-    {{ end }}
-  </ul>
-</div>
+<b class="mt-3">
+  {{ $thisSection := .Site.GetPage "section" .Section }}
+  {{ with $thisSection }}
+  {{ .Title | markdownify }}
+  {{ end }}
+</b>
+<ul class="list-unstyled ml-1">
+  {{ $mypages := intersect (where .Site.Pages "Section" .Section) (where .Site.Pages "Kind" "page") }}
+  {{ range $mypages }}
+  <li class="hanging">
+    <a href="{{ .Permalink }}"
+      >{{ .Title | markdownify}}</a
+    >
+  </li>
+  {{ end }}
+</ul>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 984aa4a..4045ad4 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,5 +1,31 @@
 <nav>
-  {{ partial "navbar" . }}
-  {{ partial "bookMenu" . }}
-  {{ partial "chapterMenu" . }}
+  <div class="d-flex flex-row mt-2 border-bottom">
+    <div class="menuItem navMenu mr-2">
+      <a href="{{ `/` | relURL }}"><i class="fas fa-home"></i></a>
+    </div>
+
+    <div class="dropdown">
+      <p class="menuItem 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>
+
+    {{ if eq .Kind "page" }}
+    <div class="dropdown">
+      <p class="menuItem navMenu ml-2 mr-2 dropbtn text-center">
+        <i class="fas fa-bars"></i>
+      </p>
+      <div class="dropdown-content p-2 bg-light shadow">
+        {{ partial "chapterMenu" . }}
+      </div>
+    </div>
+    {{ end }}
+
+    <div class="w-100 text-right">
+      {{ partial "footer" . }}
+    </div>
+  </div>
 </nav>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
deleted file mode 100644
index 6d3cc4e..0000000
--- a/layouts/partials/navbar.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="d-flex flex-row mt-2 border-bottom">
-  <div class="menuItem navMenu mr-4">
-    <a href="{{ `/` | relURL }}"><i class="fas fa-home"></i></a>
-  </div>
-  <div class="menuItem navMenu mr-4" onclick="showBooks()">
-    <i class="fas fa-book"></i>
-  </div>
-  {{ if eq .Kind "page" }}
-  <div class="menuItem navMenu" onclick="showChapters()">
-    <i class="fas fa-bars"></i>
-  </div>
-  {{ end }}
-  <div class="w-100 text-right">
-    {{ partial "footer" . }}
-  </div>
-</div>
diff --git a/static/css/kitab.css b/static/css/kitab.css
index 9288f1a..4b6065d 100644
--- a/static/css/kitab.css
+++ b/static/css/kitab.css
@@ -35,4 +35,34 @@ a:hover {
 .toTop {
   position: fixed;
   bottom: 10px;
-}
\ No newline at end of file
+}
+
+.dropbtn {
+  color: #007bff;
+}
+.dropbtn:hover {
+  color: #0056b3;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  min-width: 280px;
+  max-width: 75%;
+  z-index: 1;
+}
+.dropdown {
+  cursor: pointer;
+  position: relative !important;
+  display: inline-block !important;
+}
+.dropdown:hover {
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  background-color: white;
+}
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+.hanging {
+  padding-left: 15px;
+  text-indent: -15px;
+}
diff --git a/static/js/myFunctions.js b/static/js/myFunctions.js
index 79c9ec5..2bcca8e 100644
--- a/static/js/myFunctions.js
+++ b/static/js/myFunctions.js
@@ -1,35 +1,3 @@
-let showBooks = function() {
-  let options = document.querySelector(".chapters");
-  let menuItems = document.querySelector(".menuItems");
-  let mainItem = document.querySelector("main");
-  if (!options.classList.contains("d-none")) {
-    options.classList.add("d-none");
-  }
-  if (menuItems.classList.contains("d-none")) {
-    menuItems.classList.remove("d-none");
-    mainItem.classList.add("d-none");
-  } else {
-    menuItems.classList.add("d-none");
-    mainItem.classList.remove("d-none");
-  }
-};
-
-let showChapters = function() {
-  let menuItems = document.querySelector(".menuItems");
-  let options = document.querySelector(".chapters");
-  let mainItem = document.querySelector("main");
-  if (!menuItems.classList.contains("d-none")) {
-    menuItems.classList.add("d-none");
-  }
-  if (options.classList.contains("d-none")) {
-    options.classList.remove("d-none");
-    mainItem.classList.add("d-none");
-  } else {
-    options.classList.add("d-none");
-    mainItem.classList.remove("d-none");
-  }
-};
-
 let scrollToTop = () => {
   const c = document.documentElement.scrollTop || document.body.scrollTop;
   if (c > 0) {
-- 
cgit v1.2.3