Simplify sidebar styles

3 files changed, 54 insertions, 64 deletions

diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 521263e13..4e9e0846c 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -1,73 +1,64 @@
-// stylelint-disable declaration-no-important
-
 .bd-links {
-  @include media-breakpoint-up(md) {
-    @supports (position: sticky) {
-      position: sticky;
-      top: 5rem;
-      height: subtract(100vh, 7rem);
-      overflow-y: auto;
-    }
-  }
+  font-weight: 600;
 
-  // Override collapse behaviors
   @include media-breakpoint-up(md) {
+    position: sticky;
+    top: 5rem;
+    // Override collapse behaviors
+    // stylelint-disable-next-line declaration-no-important
     display: block !important;
-  }
-}
-
-.bd-sidenav-group-link {
-  padding: .25rem .625rem .25rem .5rem;
-  font-weight: 600;
-  color: rgba($black, .65);
-  text-decoration: none;
-  @include border-radius(.25rem);
-
-  > * { pointer-events: none; }
-
-  &:hover,
-  &:focus {
-    color: rgba($black, .85);
-    background-color: rgba($bd-purple-bright, .1);
-  }
-}
-
-.bd-sidenav-group {
-  &.has-children .bd-sidenav-group-link::before {
-    display: inline-block;
-    margin-right: .25rem;
-    line-height: 0; // Align in the middle
-    content: escape-svg($sidebar-collapse-icon);
-    @include transition(transform .35s ease);
+    height: subtract(100vh, 7rem);
+    // Prevent focus styles to be cut off:
+    padding-left: .25rem;
+    margin-left: -.25rem;
+    overflow-y: auto;
   }
 
-  [aria-expanded="true"] {
-    color: rgba($black, .85);
-
-    &::before {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-// All levels of nav
-.bd-sidebar .nav {
-  flex-flow: column nowrap;
-  padding-left: 1.25rem;
-
   a {
-    display: inline-block;
-    padding: .25rem .5rem;
-    @include font-size(.875rem);
+    display: inline-flex;
+    align-items: center;
+    padding: .1875rem .5rem;
+    margin-top: .125rem;
     color: rgba($black, .65);
-    text-decoration: none;
+    text-decoration: if($link-decoration == none, null, none);
     @include border-radius(.25rem);
 
     &:hover,
     &:focus {
       color: rgba($black, .85);
+      text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: rgba($bd-purple-bright, .1);
     }
+
+    // Indent if there's no submenu
+    &:only-child {
+      margin-left: 1.25rem;
+    }
+
+    // Add chevron if there's a submenu
+    &:not(:only-child) {
+      &::before {
+        width: 1.25em;
+        line-height: 0; // Align in the middle
+        content: escape-svg($sidebar-collapse-icon);
+        @include transition(transform .35s ease);
+        transform-origin: .5em 50%;
+      }
+
+      &:not(.collapsed) {
+        color: rgba($black, .85);
+
+        &::before {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    // Adjust font size and font weights in submenu
+    + ul {
+      @include font-size(.875rem);
+      font-weight: 400;
+    }
   }
 
   .active {
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index b1efb6b13..383ff0f0c 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -11,7 +11,7 @@
 
     <div class="container-xl my-4">
       <div class="row flex-xl-nowrap">
-        <div class="col-md-3 bd-sidebar">
+        <div class="col-md-3">
           {{ partial "docs-sidebar" . }}
         </div>
 
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 03594291f..9af562340 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -2,7 +2,7 @@
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-  <ul class="list-unstyled">
+  <ul class="list-unstyled mb-0">
   {{- range $group := .Site.Data.sidebar -}}
     {{- $link := $group.title -}}
     {{- $link_slug := $link | urlize -}}
@@ -15,17 +15,16 @@
     {{- $group_slug := $group.title | urlize -}}
     {{- $active_group := eq $.Page.Params.group $group_slug }}
 
-    <li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }}{{ if $group.pages }} has-children{{ end }}">
-      <a class="d-inline-flex align-items-center bd-sidenav-group-link" data-toggle="collapse" href="#{{ $group_slug }}-collapse"
-         role="button" aria-expanded="{{ $active_group }}"{{ if $active_group }} aria-current="true"{{ end }}>
+    <li class="my-1{{ if $active_group }} active{{ end }}">
+      <a class="{{ if not $active_group }} collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $active_group }}"{{ if $active_group }} aria-current="true"{{ end }}>
         {{ $group.title }}
       </a>
 
       {{- if $group.pages }}
-      <ul class="nav bd-sidenav mb-2 collapse{{ if $active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
+      <ul class="list-unstyled mb-2 collapse{{ if $active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
         {{- range $doc := $group.pages -}}
           {{- $doc_slug := $doc.title | urlize }}
-          <li{{ if and $active_group (eq $page_slug $doc_slug) }} class="bd-sidenav-active"{{ end }}>
+          <li>
             <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ $doc_slug }}/"{{ if and $active_group (eq $page_slug $doc_slug) }} class="active" aria-current="page"{{ end }}>
               {{- $doc.title -}}
             </a>
@@ -37,8 +36,8 @@
   {{- end }}
 
     <li class="my-3 mx-4 border-top"></li>
-    <li class="bd-sidenav-group pl-3">
-      <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/migration/">
+    <li{{ if eq $page_slug "migration" }} class="active"{{ end }}>
+      <a href="/docs/{{ $.Site.Params.docs_version }}/migration/">
         Migration
       </a>
     </li>