1 files changed, 39 insertions, 112 deletions

diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss
index 18782a9fd2..c18a42053b 100644
--- a/site/static/docs/4.3/assets/scss/_sidebar.scss
+++ b/site/static/docs/4.3/assets/scss/_sidebar.scss
@@ -1,91 +1,15 @@
 // stylelint-disable declaration-no-important
 
-//
-// Right side table of contents
-//
-
-.bd-toc {
-  @supports (position: sticky) {
-    position: sticky;
-    top: 4rem;
-    height: calc(100vh - 4rem);
-    overflow-y: auto;
-  }
-  order: 2;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  @include font-size(.875rem);
-}
-
-// stylelint-disable selector-max-type, selector-max-combinators, selector-max-compound-selectors
-.bd-toc nav {
-  padding-left: 0;
-  border-left: 1px solid #eee;
-
-  > ul,
-  > ul > li > ul {
-    padding: 0;
-  }
-
-  a code {
-    font: inherit;
-  }
-
-  li {
-    display: block;
-
-    ul li ul {
-      padding-left: 1rem;
-    }
-
-    a {
-      display: block;
-      padding: .125rem 1.5rem;
-      color: #77757a;
-
-      &:hover {
-        color: $blue;
-        text-decoration: none;
-      }
-    }
-  }
-}
-// stylelint-enable selector-max-type, selector-max-combinators, selector-max-compound-selectors
-
-//
-// Left side navigation
-//
-
 .bd-sidebar {
   order: 0;
-  // background-color: #f5f2f9;
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
-
-  @include media-breakpoint-up(md) {
-    @supports (position: sticky) {
-      position: sticky;
-      top: 4rem;
-      z-index: 1000;
-      height: calc(100vh - 4rem);
-    }
-    border-right: 1px solid rgba(0, 0, 0, .1);
-  }
-
-  @include media-breakpoint-up(xl) {
-    flex: 0 1 320px;
-  }
 }
 
 .bd-links {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  margin-right: -15px;
-  margin-left: -15px;
-
   @include media-breakpoint-up(md) {
     @supports (position: sticky) {
-      max-height: calc(100vh - 9rem);
-      overflow-y: auto;
+      position: sticky;
+      top: 5rem;
+      z-index: 1000;
     }
   }
 
@@ -97,10 +21,6 @@
 
 .bd-search {
   position: relative; // To contain the Algolia search
-  padding: 1rem 15px;
-  margin-right: -15px;
-  margin-left: -15px;
-  border-bottom: 1px solid rgba(0, 0, 0, .05);
 
   .form-control:focus {
     border-color: $bd-purple-bright;
@@ -117,32 +37,35 @@
   display: none;
 }
 
-.bd-toc-link {
-  display: block;
-  padding: .25rem 1.5rem;
+.bd-sidenav-group-link {
+  padding: .25rem .625rem .25rem .5rem;
   font-weight: 600;
   color: rgba(0, 0, 0, .65);
+  @include border-radius(.25rem);
+
+  > * { pointer-events: none; }
 
   &:hover {
     color: rgba(0, 0, 0, .85);
     text-decoration: none;
+    background-color: rgba($bd-purple-bright, .1);
   }
 }
 
-.bd-toc-item {
-  &.active {
-    margin-bottom: 1rem;
+.bd-sidenav-group-link-icon {
+  width: .875rem;
+  margin-right: .25rem;
+  opacity: .5;
+}
 
-    &:not(:first-child) {
-      margin-top: 1rem;
+.bd-sidenav-group {
+  &.active {
+    .bd-sidenav-group-link-icon {
+      transform: rotate(90deg);
     }
 
-    > .bd-toc-link {
+    > .bd-sidenav-group-link {
       color: rgba(0, 0, 0, .85);
-
-      &:hover {
-        background-color: transparent;
-      }
     }
 
     > .bd-sidenav {
@@ -152,22 +75,26 @@
 }
 
 // All levels of nav
-.bd-sidebar .nav > li > a {
-  display: block;
-  padding: .25rem 1.5rem;
-  @include font-size(90%);
-  color: rgba(0, 0, 0, .65);
-}
+.bd-sidebar .nav {
+  padding-left: 1.25rem;
 
-.bd-sidebar .nav > li > a:hover {
-  color: rgba(0, 0, 0, .85);
-  text-decoration: none;
-  background-color: transparent;
-}
+  > li > a {
+    display: inline-block;
+    padding: .25rem .5rem;
+    @include font-size(.875rem);
+    color: rgba(0, 0, 0, .65);
+    @include border-radius(.25rem);
 
-.bd-sidebar .nav > .active > a,
-.bd-sidebar .nav > .active:hover > a {
-  font-weight: 600;
-  color: rgba(0, 0, 0, .85);
-  background-color: transparent;
+    &:hover {
+      color: rgba(0, 0, 0, .85);
+      text-decoration: none;
+      background-color: rgba($bd-purple-bright, .1);
+    }
+  }
+
+  > .active > a,
+  > .active:hover > a {
+    font-weight: 600;
+    color: rgba(0, 0, 0, .85);
+  }
 }