feat: add the hb.docs.navs_sticky_scroll parameter, default to true (#811)

Author: razonyang

assets/hb/modules/docs/js/nav.ts

@@ -24,6 +24,17 @@
 
   active(link)
   document.addEventListener('DOMContentLoaded', () => {
-    document.querySelector('.hb-docs-nav')?.scrollTo(0, link.offsetTop)
+    const nav = document.querySelector('.hb-docs-nav')
+    nav?.scrollTo(0, link.offsetTop / 2)
+
+    document.querySelectorAll('.hb-docs-nav-links-group .collapse').forEach((el) => {
+      el.addEventListener('hide.bs.collapse', event => {
+        if (event.target !== el) {
+          return
+        }
+
+        nav?.scrollTo(0, el.offsetTop / 2)
+      }, false)
+    })
   })
 })()

assets/hb/modules/docs/scss/_nav.scss

@@ -1,4 +1,13 @@
 .hb-docs-nav-heading {
+    @if ($hb-docs-navs-sticky-scroll) {
+        @include media-breakpoint-up(xl) {
+            position: sticky;
+            top: 0;
+            background: var(--#{$prefix}tertiary-bg);
+            z-index: 5;
+        }
+    }
+
     a {
         color: inherit;
         text-decoration: none;
@@ -33,3 +42,22 @@
         }
     }
 }
+
+@mixin hb-docs-nav-heading-top($level, $levels, $height) {
+    .hb-docs-nav-links-group {
+        .hb-docs-nav-heading {
+            z-index: $levels - $level;
+            top: $level * $height;
+        }
+
+        @if ($level <= $levels) {
+            @include hb-docs-nav-heading-top($level + 1, $levels, $height);
+        }
+    }
+}
+
+@if ($hb-docs-navs-sticky-scroll) {
+    .hb-docs-nav-links-group {
+        @include hb-docs-nav-heading-top(1, 5, 2.075rem);
+    }
+}

assets/hb/modules/docs/scss/variables.tmpl.scss

@@ -0,0 +1 @@
+$hb-docs-navs-sticky-scroll: {{ default true site.Params.hb.docs.navs_sticky_scroll }};

hugo.toml

@@ -15,6 +15,7 @@ cache_key = "page.Type"
 [params.hb.docs]
 date_format = ":date_long"
 navs_reduce_font_size = false
+navs_sticky_scroll = true
 
 # Takes the full width by default.
 [params.hb.full_width_types.docs]