Move table of contents to new sidebar, restyle it to be simpler

2 files changed, 50 insertions, 20 deletions

diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 9e7de3c2b..cc9a6d6dd 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,17 +1,37 @@
 // stylelint-disable selector-max-type, selector-max-compound-selectors
 
+.bd-toc-wrap {
+  @include media-breakpoint-up(lg) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 5rem;
+      right: 0;
+      z-index: 2;
+      height: subtract(100vh, 7rem);
+      overflow-y: auto;
+    }
+  }
+}
+
 .bd-toc nav {
-  padding-top: .125em;
-  padding-bottom: .125em;
-  border-left: .25em solid $gray-200;
+  @include font-size(.875rem);
 
-  > ul {
-    margin-bottom: 0;
+  ul {
+    padding-left: 0;
+    list-style: none;
+
+    ul {
+      padding-left: 1rem;
+      margin-top: .25rem;
+    }
   }
 
-  li ul li {
+  li {
     margin-bottom: .25rem;
-    list-style-type: disc;
+  }
+
+  a {
+    color: inherit;
   }
 
   a:not(:hover) {
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 383ff0f0c..c3eff6ec8 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -9,16 +9,18 @@
     {{ partial "docs-navbar" . }}
     {{ partial "docs-subnav" . }}
 
-    <div class="container-xl my-4">
+    <div class="container-xxl my-4">
       <div class="row flex-xl-nowrap">
-        <div class="col-md-3">
+        <div class="col-md-3 col-xl-2 bd-sidebar">
           {{ partial "docs-sidebar" . }}
         </div>
 
-        <main class="col-md-9 py-md-3 pl-md-5 bd-content">
-          <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
-          <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
-          {{ partial "ads" . }}
+        <main class="col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content">
+          <div class="col-xl-10 px-0">
+            <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+            <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
+            {{ partial "ads" . }}
+          </div>
 
           {{ if .Page.Params.sections }}
             <div class="row my-5">
@@ -33,14 +35,22 @@
             </div>
           {{ end }}
 
-          {{ if (eq .Page.Params.toc true) }}
-            <strong class="d-block h3 mt-5 mb-3">On this page</strong>
-            <nav class="bd-toc mb-5 text-muted" aria-label="Secondary navigation">
-              {{ .TableOfContents }}
-            </nav>
-          {{ end }}
+          <div class="row position-relative flex-xl-row-reverse">
+            <div class="col-xl-3">
+              {{ if (eq .Page.Params.toc true) }}
+                <div class="bd-toc-wrap pl-xl-3 text-muted">
+                  <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
+                  <div class="bd-toc mb-5 mb-xl-0">
+                    {{ .TableOfContents }}
+                  </div>
+                </div>
+              {{ end }}
+            </div>
+            <div class="col-xl-9">
+              {{ .Content }}
+            </div>
+          </div>
 
-          {{ .Content }}
         </main>
       </div>
     </div>