feat: add the hb.docs.navs_active_style parameter (#836)

Available options: empty string or `bordered`.

Closes #835

Author: razonyang

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

@@ -20,13 +20,37 @@
     margin-top: 0.25rem;
     padding: 0.25rem 0.5rem;
     text-decoration: none;
+}
 
+.hb-docs-nav-heading {
     &:hover,
     &.active {
         background: var(--#{$prefix}primary-bg-subtle);
     }
 }
 
+.hb-docs-nav-link {
+    position: relative;
+
+    &:hover,
+    &.active {
+        @if ($hb-docs-navs-active-style == '') {
+            background: var(--#{$prefix}primary-bg-subtle);
+        }
+
+        @if ($hb-docs-navs-active-style == 'bordered') {
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                margin-left: -.325rem;
+                border-left: 2px solid var(--#{$prefix}primary);
+                height: 1.25rem;
+            }
+        }
+    }
+}
+
 .hb-docs-nav-links {
     > .hb-docs-nav-links-span-all {
         .hb-docs-nav-link {

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

@@ -1 +1,2 @@
 $hb-docs-navs-sticky-scroll: {{ default true site.Params.hb.docs.navs_sticky_scroll }};
+$hb-docs-navs-active-style: '{{ default "" site.Params.hb.docs.navs_active_style }}';

hugo.toml

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