Converted menu to hover type

6 files changed, 89 insertions, 84 deletions

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) {