From 3bbaeacd746345b795e27b8cbad7781cb9674697 Mon Sep 17 00:00:00 2001
From: Martyn Welch <martyn.welch@collabora.com>
Date: Thu, 24 Sep 2020 17:53:23 +0100
Subject: [PATCH] Implement basic site menu

It has been communicated to us that the menu on the left hand side of the
designs.apertis.org site is missed when looking for documents on the
website. Implement a basic site menu in a sidebar to get feedback.

Signed-off-by: Martyn Welch <martyn.welch@collabora.com>
---
 .../layouts/partials/footer_custom.html       | 11 ++++
 .../beautifulhugo/layouts/partials/nav.html   | 22 +++++++
 themes/beautifulhugo/static/css/main.css      | 57 +++++++++++++++++++
 3 files changed, 90 insertions(+)

diff --git a/themes/beautifulhugo/layouts/partials/footer_custom.html b/themes/beautifulhugo/layouts/partials/footer_custom.html
index b37ac3fd6..9238f54a3 100644
--- a/themes/beautifulhugo/layouts/partials/footer_custom.html
+++ b/themes/beautifulhugo/layouts/partials/footer_custom.html
@@ -2,3 +2,14 @@
 <script>
 anchors.add('h1,h2,h3,h4,h5,h6').remove('.page-heading > h1');
 </script>
+
+<script>
+function toggleSidebar(item) {
+  $('#site-sidebar').toggleClass('sidebar-hidden');
+  if ($('#site-sidebar').width() != 300) {
+    item.innerHTML = "&#x25B2"
+  } else {
+    item.innerHTML = "&#x25BC"
+  }
+}
+</script>
diff --git a/themes/beautifulhugo/layouts/partials/nav.html b/themes/beautifulhugo/layouts/partials/nav.html
index 86f99c0ee..334da1bb3 100644
--- a/themes/beautifulhugo/layouts/partials/nav.html
+++ b/themes/beautifulhugo/layouts/partials/nav.html
@@ -7,6 +7,7 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
+      <a class="navbar-brand navbar-sitebar" href="javascript:void(0)" onclick="toggleSidebar(this)">&#x25BC</a>
       <a class="navbar-brand" href="{{ "" | absLangURL }}">{{ .Site.Title }}</a>
     </div>
 
@@ -72,3 +73,24 @@
 
   </div>
 </nav>
+
+
+<nav class="sidebar sidebar-hidden" id="site-sidebar">
+      <ul>
+        {{ range sort .Site.Sections.ByTitle }}
+          <li class="sidebar-section">
+            <a href="{{ .URL | relLangURL }}">{{ .Title }}</a>
+            <div class="sidebar-pages">
+              <ul>
+                {{ range .Pages }}
+                  <li class="sidebar-page">
+                    <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+                  </li>
+                {{ end }}
+              </ul>
+            </div>
+          </li>
+        {{ end }}
+
+      </ul>
+</nav>
diff --git a/themes/beautifulhugo/static/css/main.css b/themes/beautifulhugo/static/css/main.css
index 6df3784e4..383389735 100644
--- a/themes/beautifulhugo/static/css/main.css
+++ b/themes/beautifulhugo/static/css/main.css
@@ -172,6 +172,12 @@ img {
   }
 }
 
+@media only screen and (min-width: 1450px) {
+  .navbar-custom .navbar-sitebar {
+    display: none;
+  }
+}
+
 .navbar-custom .avatar-container {
   opacity: 1;
   position: absolute;
@@ -817,3 +823,54 @@ div.notices.tip p:first-child:after {
   color: #e67d1e;
   text-decoration: none;
 }
+
+/* --- Sidebar --- */
+
+.sidebar {
+  height: 100%;
+  width: 300px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #414141;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 100px;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.sidebar-hidden {
+  width: 0px;
+}
+
+@media only screen and (min-width: 1450px) {
+  .sidebar-hidden {
+    width: 300px;
+  }
+}
+
+.sidebar-section a {
+  color: #e67d1e;
+}
+
+.sidebar ul {
+  padding-left: 20px;
+}
+
+.sidebar-page a {
+  color: #bebebe;
+}
+
+.sidebar-page li {
+  list-style-type: circle;
+}
+
+.sidebar-section {
+  font-size: 18px;
+}
+
+.sidebar-page {
+  font-size: 14px;
+}
+
-- 
GitLab