Align menu to section heading

The site menu is quite long. When we are in a section, scroll the menu to
the relevant section.

This is a bit hacky due to the navbar at the top and the way the theme is
constructed. In order to avoid issues with the scrolling distance being
incorrectly calculated (due to reflow of text as the side bar gets wider)
animate as a drop-down instead of appearing from the side.

Signed-off-by: Martyn Welch <martyn.welch@collabora.com>

themes/beautifulhugo/layouts/partials/footer_custom.html

@@ -13,3 +13,9 @@ function toggleSidebar(item) {
   }
 }
 </script>
+
+<script>
+if ($('#sidebar-focus').length != 0) {
+  $('#site-sidebar').scrollTop($('#sidebar-focus').position().top - 100);
+}
+</script>

themes/beautifulhugo/layouts/partials/nav.html

@@ -77,9 +77,14 @@
 
 <nav class="sidebar sidebar-hidden" id="site-sidebar">
       <ul>
+        {{ $section := .CurrentSection }}
         {{ range sort .Site.Sections.ByTitle }}
           <li class="sidebar-section">
+            {{ if .InSection $section }}
+            <a href="{{ .URL | relLangURL }}" id="sidebar-focus">{{ .Title }}</a>
+            {{ else }}
             <a href="{{ .URL | relLangURL }}">{{ .Title }}</a>
+            {{ end }}
             <div class="sidebar-pages">
               <ul>
                 {{ range .Pages }}

themes/beautifulhugo/static/css/main.css

@@ -835,16 +835,16 @@ div.notices.tip p:first-child:after {
   left: 0;
   background-color: #414141;
   overflow-x: hidden;
-  transition: 0.5s;
+  transition: height 0.5s;
   padding-top: 100px;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 @media not screen, screen and (max-width: 1450px) {
   .sidebar-hidden {
-    width: 0px;
+    height: 0%;
     visibility: hidden;
-    transition: width 0.5s, visibility 0s linear 0.5s;
+    transition: height 0.5s, visibility 0s linear 0.5s;
   }
 }