Redesign the toc for scrollspy

Author: mdo

site/assets/scss/_toc.scss

@@ -1,5 +1,3 @@
-// stylelint-disable selector-max-type
-
 .bd-toc {
   @include media-breakpoint-up(lg) {
     position: sticky;
@@ -10,29 +8,35 @@
     overflow-y: auto;
   }
 
-  nav {
+  .nav {
     @include font-size(.875rem);
 
-    ul ul {
+    ul {
       padding-left: 1rem;
-      margin-top: .25rem;
     }
 
-    li {
-      margin-bottom: .25rem;
-
-      > .nav-link.active {
-        background-color: $bd-purple-light;
+    .nav-link {
+      padding: .125rem 0 .125rem .9rem;
+      margin-left: -1rem;
+      border-left: .1rem solid transparent;
+      @include border-radius(0);
+
+      &:hover,
+      &.active {
+        font-weight: 500;
+        color: $bd-purple;
+        background-color: transparent;
+        border-left-color: $bd-purple-light;
+      }
+      &.active {
+        padding-left: .8em;
+        border-left-width: .2em;
       }
     }
 
     a {
       color: inherit;
 
-      &:hover:not(.active) {
-        text-decoration: underline;
-      }
-
       code {
         font: inherit;
       }

site/layouts/_default/docs.html

@@ -20,7 +20,7 @@ <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
       {{ if (eq .Page.Params.toc true) }}
         <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
           <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
-          {{ .Page.TableOfContents  | replaceRE "(<li>)" "<li class=\"nav-item\">"  | replaceRE "(<ul>)" "<ul class=\"nav nav-pills flex-column\">" | replaceRE "(?s:href)" "class=\"nav-link py-0 px-1\" href" |  safeHTML }}
+          {{ .Page.TableOfContents  | replaceRE "(<li>)" "<li class=\"nav-item\">"  | replaceRE "(<ul>)" "<ul class=\"nav nav-pills flex-column\">" | replaceRE "(?s:href)" "class=\"nav-link\" href" |  safeHTML }}
         </div>
       {{ end }}