use scrollspy on docs pages

twbs · Oct 26, 2022 · ce2015e · ce2015e
1 parent a7a2253
commit ce2015e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
@@ -1,4 +1,5 @@
 // stylelint-disable selector-max-type
+// stylelint-disable selector-no-qualifying-type
 
 .bd-toc {
   @include media-breakpoint-up(lg) {
@@ -29,10 +30,18 @@
     }
 
     a {
+      padding: .1rem .2rem;
       color: inherit;
+      text-decoration: none;
+      @include border-radius(.2rem);
 
-      &:not(:hover) {
-        text-decoration: none;
+      &:hover,
+      &.active {
+        color: $bd-purple;
+        background-color: $bd-purple-light;
+      }
+      &.active {
+        font-weight: 500;
       }
 
       code {

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
@@ -1,3 +1,4 @@
+{{ define "body_override" }}<body data-bs-spy="scroll" tabindex="0" data-bs-target="#TableOfContents">{{ end }}
 {{ define "main" }}
   <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">