Merge pull request #1358 from gethinode/develop

Refine sidebar behavior

assets/scss/components/_sidebar.scss

@@ -7,22 +7,45 @@
     top: var(--navbar-offset);
     max-height: 90vh;
     overflow-y: auto;
+    scrollbar-gutter: stable;
 }
 
 .sidebar-item {
     color: rgba(0, 0, 0, 0.65);
     margin-left: 0 !important;
-    padding-left: 0.85rem !important;
     display: inline-block;
+    padding: 0.1875rem 0.5rem !important;
+
+    &.active {
+        color: $primary;
+    }
 
-    &.active,
     &:hover,
     &:focus {
-        color: black;
+        color: $primary;
+        background-color: tint-color($primary, 90%);
     }
 }
 
-.btn-toggle {
+.sidebar-item-group {
+    &:hover,
+    &:focus {
+        color: $primary;
+        background-color: tint-color($primary, 90%);
+    }
+    
+    > div > a {
+        color: var(--bs-body-color) !important;
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
+
+.sidebar-item-group > div {
+    padding: 0.1875rem 0.5rem !important;
+}
+
+.btn-toggle-group {
     padding: 0.25rem 0.5rem;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.65);
@@ -30,8 +53,7 @@
 
     &:hover,
     &:focus {
-        color: black;
+        background-color: transparent;
-        background-color: tint-color($primary, 90%);
     }
 
     &::before {
@@ -43,50 +65,49 @@
     }
 }
 
-.btn-toggle[aria-expanded="true"] {
+.btn-toggle-group[aria-expanded="true"] {
-    color: black;
-
     &::before {
         transform: rotate(90deg);
     }
 }
 
-.btn-toggle-nav a {
-    padding: 0.1875rem 0.5rem;
-    margin-top: 0.125rem;
-    margin-left: 1.25rem;
-
-    &:hover,
-    &:focus {
-        background-color: tint-color($primary, 90%);
-    }
-
-    &.active {
-        font-weight: bold;
-    }
-}
-
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .sidebar-item {
             color: var(--bs-body-color);
-            margin-left: 0 !important;
-            padding-left: 0.85rem !important;
 
-            &.active,
+            &.active {
+                color: $primary-text-emphasis-dark !important;
+            }
+
+            &:hover,
+            &:focus {
+                color: $primary-text-emphasis-dark !important;
+                background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
+    }
+        }
+
+        .sidebar-item-group {
+            color: var(--bs-body-color) !important;
+
+            &.active {
+                color: $primary-text-emphasis-dark !important;
+            }
+
             &:hover,
             &:focus {
                 color: white !important;
                 background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
             }
         }
 
-        .btn-toggle {
+        .btn-toggle-group {
             color: var(--bs-body-color);
         
             &:hover,
             &:focus {
-                color: white !important;
                 background-color: transparent;
             }
         
@@ -95,25 +116,9 @@
             }
         }
 
-        .btn-toggle[aria-expanded="true"] {
+        .btn-toggle-group[aria-expanded="true"] {
             color: var(--bs-secondary-color);
         }
-
-        .btn-toggle-nav a {
-            padding: 0.1875rem 0.5rem;
-            margin-top: 0.125rem;
-            margin-left: 1.25rem;
-
-            &:hover,
-            &:focus {
-                color: white !important;
-                background-color: transparent;
-            }
-
-            &.active {
-                font-weight: bold;
-            }
-        }
                     }
 }
 

layouts/partials/assets/sidebar.html

@@ -28,12 +28,34 @@
 
     {{- $doc_slug := partial "utilities/URLJoin.html" (dict "base" $baseURL "path" ($group.title | urlize)) -}}
     {{- $href := or $group.link $doc_slug -}}
+    {{ $ref := partial "utilities/GetPage.html" (dict "url" $href "page" $page) }}
+    {{ if eq $group.link "#" }}{{ $href = $doc_slug }}{{ end }}
     {{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}
+    {{ if not (hasSuffix $href "/") }}{{ $href = printf "%s/" $href }}{{ end }}
+    {{- $current := eq $href $page.RelPermalink }}
 
     <li class="mb-1">
-        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}" aria-expanded="{{ if $collapsed }}true{{ else }}false{{ end }}">
+        <div class="d-flex w-100 p-0 sidebar-item-group">
-            <div class="text-start flex-fill">{{ $group.title }}</div>
+            <div class="text-start flex-grow-1 {{ if $current }}fw-bold{{ end }}">
+                {{ $dest := $href }}
+                {{ $target := "" }}
+                {{ if or $current (not $ref) }}
+                    {{ $dest = "" }}
+                {{ end }}
+                <a {{ with $dest }} href="{{ . }}"{{ else }}
+                data-bs-toggle="collapse" 
+                data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}"
+                {{ end }}>{{ $group.title }}</a>
+            </div>
+            
+            <button 
+                class="btn btn-toggle-group d-inline-flex align-items-center rounded border-0 collapsed" 
+                data-bs-toggle="collapse" 
+                data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}"
+                aria-expanded="{{ if $collapsed }}true{{ else }}false{{ end }}"
+            >
             </button>
+        </div>
         <div class="collapse {{ if $collapsed }}show{{ end }}" id="sidebar-collapse-{{ $index }}-{{ $level }}">
             <ul class="btn-toggle-nav list-unstyled fw-normal {{ if eq $level 0}} pb-1 {{ end }}ps-3">
                 {{- range $item := $group.pages -}}
@@ -79,9 +101,11 @@
             {{ $href = . }}
         {{ else }}
             {{- $href = partial "utilities/URLJoin.html" (dict "base" $baseURL "path" .) -}}
+            {{ if not (hasSuffix $href "/") }}{{ $href = printf "%s/" $href }}{{ end }}
         {{ end }}
     {{ else }}
         {{- $href = partial "utilities/URLJoin.html" (dict "base" $baseURL "path" ($title | urlize)) -}}
+        {{ if not (hasSuffix $href "/") }}{{ $href = printf "%s/" $href }}{{ end }}
     {{ end }}
     {{- $active := eq (strings.TrimSuffix "/" $page.RelPermalink) (strings.TrimSuffix "/" $href) -}}
 
@@ -91,7 +115,7 @@
         <li>
             <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
                 <li>
-                    {{ $class := "sidebar-item text-decoration-none rounded" }}
+                    {{ $class := "sidebar-item text-decoration-none rounded w-100" }}
                     {{ if $active }}{{ $class = printf "%s active" $class }}{{ end }}
                     {{ $link := partial "assets/link.html" (dict "destination" $href "text" $title "class" $class "page" $page) }}
                     {{ if $link }}
@@ -104,7 +128,7 @@
         </li>
     {{ else }}
         <li>
-            {{ $class := "sidebar-item text-decoration-none rounded small" }}
+            {{ $class := "sidebar-item text-decoration-none rounded small w-100" }}
             {{ if $active }}{{ $class = printf "%s active" $class }}{{ end }}
             {{ $link := partial "assets/link.html" (dict "destination" $href "text" $title "class" $class "page" $page) }}
             {{ if $link }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.27.26",
+  "version": "0.27.27",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.27.26",
+      "version": "0.27.27",
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^7.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.27.26",
+  "version": "0.27.27",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",