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>

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>

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>

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;
+}
+