docs layout: Fix responsiveness of sidebar over range of resolutions

Fix #698

layouts/partials/css/academic.css

@@ -1540,6 +1540,21 @@ div.alert a {
 }
 
 @media (min-width:768px) {
+  .docs-sidebar {
+    border-right: 1px solid rgba(0, 0, 0, .1)
+  }
+  @supports ((position:-webkit-sticky) or (position:sticky)) {
+    .docs-sidebar {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 51px;
+      z-index: 1000;
+      height: calc(100vh - 51px)
+    }
+  }
+}
+
+@media (min-width:1200px) {
   .docs-sidebar {
     border-right: 1px solid rgba(0, 0, 0, .1)
   }
@@ -1585,6 +1600,12 @@ div.alert a {
 
 /* Docs links. */
 
+.docs-toggle {
+  line-height: 1;
+  font-size: 1.2rem;
+  color: {{ .Get "primary" }};
+}
+
 .docs-links {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1593,7 +1614,7 @@ div.alert a {
 }
 
 @media (min-width:768px) {
-  @supports (position: sticky) {
+  @supports ((position:-webkit-sticky) or (position:sticky)) {
     .docs-links {
       max-height: calc(100vh - 5rem - 71px);
       overflow-y: auto;
@@ -1620,8 +1641,8 @@ div.alert a {
   .docs-toc {
     position: -webkit-sticky;
     position: sticky;
-    top: 4rem;
-    height: calc(100vh - 4rem);
+    top: 71px;
+    height: calc(100vh - 71px);
     overflow-y: auto
   }
 }

layouts/partials/docs_sidebar.html

@@ -5,13 +5,17 @@
 {{ errorf "Please define menu items named `[menu.%s]` in your %s front matter or define `[[menu.%s]]` in `config.toml`." $menu_name .Path $menu_name }}
 {{ end }}
 
-{{ if eq $.Site.Params.search.engine 1 }}
 <form class="docs-search d-flex align-items-center">
+  <button class="btn docs-toggle d-md-none p-0 mr-3" type="button" data-toggle="collapse" data-target="#docs-nav" aria-controls="docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    <span><i class="fas fa-bars"></i></span>
+  </button>
+
+  {{ if eq $.Site.Params.search.engine 1 }}
   <input name="q" type="search" class="form-control" id="search-query" placeholder="{{ i18n "search_placeholder" }}" autocomplete="off">
+  {{ end }}
 </form>
-{{ end }}
 
-<nav class="docs-links" id="docs-nav">
+<nav class="collapse docs-links" id="docs-nav">
   {{ with (index .Site.Menus $menu_name) }}
   {{ range (index $.Site.Menus $menu_name).ByWeight }}
   <div class="docs-toc-item{{ if $current_page.IsMenuCurrent $menu_name . }} active{{ end }}">