Merge pull request #195 from gethinode/develop

Multi-level sidebar nav
Fix linting issues
2025-10-07 10:04:22 +00:00 · 2023-04-05 09:05:08 +02:00 · 2023-04-05 08:51:38 +02:00 · 2023-04-05 08:39:41 +02:00 · 2023-04-05 08:39:24 +02:00 · 2023-04-05 08:31:21 +02:00
5 changed files with 131 additions and 125 deletions
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -53,9 +53,6 @@
 // Import Bootstrap helpers
@import "bootstrap/scss/helpers";

-// Import Bootstrap utilities
-@import "bootstrap/scss/utilities/api";
-
 // Import Font Awesome
 // scss-docs-start awesome
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@@ -97,4 +94,7 @@
 {{ end }}

 // Import theme placeholder
-@import "theme/theme.scss";
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API
+@import "bootstrap/scss/utilities/api";
--- a/assets/scss/components/_sidebar.scss
+++ b/assets/scss/components/_sidebar.scss
@@ -10,7 +10,15 @@
 }

 .sidebar-item {
-    color: black;
+    color: rgba(0, 0, 0, 0.65);
+    margin-left: 0 !important;
+    padding-left: 0.85rem !important;
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: black;
+    }
 }

 .btn-toggle {
@@ -61,6 +69,14 @@
    @include color-mode(dark) {
        .sidebar-item {
            color: var(--bs-tertiary-color);
+            margin-left: 0 !important;
+            padding-left: 0.85rem !important;
+        
+            &.active,
+            &:hover,
+            &:focus {
+                color: var(--bs-secondary-color);
+            }
        }

        .btn-toggle {
--- a/layouts/partials/assets/sidebar.html
+++ b/layouts/partials/assets/sidebar.html
@@ -2,57 +2,109 @@
 {{- $section := $page.Section }}
 {{- $data := .menu -}}

+{{- define "partials/sidebar/group.html" -}}
+    {{- $page := .page -}}
+    {{- $index := .index -}}
+    {{- $level := .level -}}
+    {{- $baseURL := .baseURL -}}
+    {{- $group := .group -}}
+
+    {{- $doc_slug := $group.title | urlize -}}
+    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
+    {{ $collapsed := strings.HasPrefix $page.RelPermalink $href }}
+    {{ warnf "Page: %s" $href }}
+
+    <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="text-start flex-fill">{{ $group.title }}</div>
+        </button>
+        <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 -}}
+                    {{- if $item.pages -}}
+                        {{ partial "partials/sidebar/group.html" (dict 
+                            "page" $page
+                            "index" $index
+                            "level" (add $level 1)
+                            "baseURL" $href
+                            "group" $item
+                            )
+                        }}
+                    {{- else -}}
+                        {{ partial "partials/sidebar/item.html" (dict 
+                            "page" $page
+                            "sectionBreak" false
+                            "level" $level
+                            "baseURL" $href
+                            "title" $item.title
+                            )
+                        }}
+                    {{ end -}}
+                {{- end }}
+            </ul>
+        </div>
+    </li>
+{{ end -}}
+
+{{- define "partials/sidebar/item.html" -}}
+    {{ $page := .page }}
+    {{ $sectionBreak := .sectionBreak }}
+    {{- $level := .level -}}
+    {{ $baseURL := .baseURL}}
+    {{ $title := .title}}
+
+    {{- $doc_slug := $title | urlize -}}
+    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
+    {{ $active := eq $page.RelPermalink $href }}
+
+    {{ if eq $level 0}}
+        <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
+        {{- $sectionBreak = false }}
+        <li>
+            <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
+                <li>
+                    <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded {{ if $active }}active{{ end }}">
+                        {{ $title }}
+                    </a>      
+                </li>
+            </ul>
+        </li>
+    {{ else }}
+        <li>
+            <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded small {{ if $active }}active{{ end }}">
+                {{ $title }}
+            </a>      
+        </li>
+    {{ end }}
+{{ end -}}
+
 {{ if $data }}
    <nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
-        {{- $url := split $page.Permalink "/" -}}
-        {{- $page_slug := index $url (sub (len $url) 2) -}}
        {{- $sectionBreak := false }}
+        {{ $level := 0}}
+        {{ $baseURL := relLangURL (path.Join $section site.Params.docs.version) }}

        <ul class="list-unstyled ps-0">
-        {{- range $index, $group := $data -}}
-            {{- $link := $group.title -}}
-            {{- $link_slug := $link | urlize -}}
-
-            {{- if $group.pages -}}
-                {{- $link = index $group.pages 0 -}}
-                {{- $link_slug = $link.title | urlize -}}
-            {{- end -}}
-
-            {{- $group_slug := $group.title | urlize -}}
-            {{- $is_active_group := eq $page.Params.group $group_slug -}}
-
-            {{- if $group.pages }}
+        {{- range $index, $item := $data -}}
+            {{- if $item.pages }}
                {{- $sectionBreak = true }}
-                <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 }}" aria-expanded="{{ if $is_active_group }}true{{ else }}false{{ end }}">
-                        <div class="text-start flex-fill">{{ $group.title }}</div>
-                    </button>
-                    <div class="collapse {{ if $is_active_group }}show{{ end }}" id="sidebar-collapse-{{ $index }}">
-                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                            {{- range $doc := $group.pages -}}
-                                {{- $doc_slug := $doc.title | urlize -}}
-                                {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-                                {{- $href := relLangURL (path.Join $section site.Params.docs.version $group_slug $doc_slug) -}}
-                                <li><a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
-                            {{- end }}
-                        </ul>
-                    </div>
-                </li>
+                {{ partial "partials/sidebar/group.html" (dict 
+                    "page" $page
+                    "index" $index
+                    "level" (add $level 1)
+                    "baseURL" $baseURL
+                    "group" $item
+                    )
+                }}
            {{- else }}
-                <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
-                {{- $sectionBreak = false }}
-                <li>
-                    <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
-                        <li>
-                            {{- $doc_slug := $group.title | urlize -}}
-                            {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-                            {{- $href := relLangURL (path.Join $section site.Params.docs.version $doc_slug) -}}
-                            <a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">
-                                {{ $group.title }}
-                            </a>      
-                        </li>
-                    </ul>
-                </li>
+                {{ partial "partials/sidebar/item.html" (dict 
+                    "page" $page
+                    "sectionBreak" $sectionBreak
+                    "level" $level
+                    "baseURL" $baseURL
+                    "title" $item.title
+                    )
+                }}
            {{- end }}
        {{- end }}
        </ul>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.10.0",
+  "version": "0.11.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "0.10.0",
+      "version": "0.11.0",
      "license": "MIT",
      "devDependencies": {
        "@fortawesome/fontawesome-free": "^6.4.0",
@@ -21,7 +21,7 @@
        "eslint-plugin-n": "^15.7.0",
        "eslint-plugin-promise": "^6.1.1",
        "flexsearch": "^0.7.31",
-        "hugo-bin": "^0.101.5",
+        "hugo-bin": "^0.102.0",
        "markdownlint-cli2": "^0.6.0",
        "postcss-cli": "^10.1.0",
        "purgecss-whitelister": "^2.4.0",
@@ -3389,9 +3389,9 @@
      "dev": true
    },
    "node_modules/hugo-bin": {
-      "version": "0.101.5",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.101.5.tgz",
-      "integrity": "sha512-iq125a7Z0Zwx9nk/+66O+Yy7juwoY5ttQ8+6tkCzDoyDN71n2m8BiG8qeFLYQF1joMiiPE8ItGYu0Tkn98aGxA==",
+      "version": "0.102.0",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.0.tgz",
+      "integrity": "sha512-gJeDdC4W0x/+a8rf7pz8L/NheEeHIKrtLIHFwMumX04UAFYUA065A4uQmDjRspsMdQ9muwB9eQfOwTSjqaYyrQ==",
      "dev": true,
      "funding": [
        {
@@ -3402,49 +3402,13 @@
      "hasInstallScript": true,
      "dependencies": {
        "@xhmikosr/bin-wrapper": "^5.0.1",
-        "pkg-conf": "^4.0.0",
-        "rimraf": "^3.0.2"
+        "pkg-conf": "^4.0.0"
      },
      "bin": {
        "hugo": "cli.js"
      },
      "engines": {
-        "node": "^14.13.1 || >=16.0.0"
-      }
-    },
-    "node_modules/hugo-bin/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/hugo-bin/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": "^14.14.0 || >=16.0.0"
      }
    },
    "node_modules/human-signals": {
@@ -9578,39 +9542,13 @@
      "dev": true
    },
    "hugo-bin": {
-      "version": "0.101.5",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.101.5.tgz",
-      "integrity": "sha512-iq125a7Z0Zwx9nk/+66O+Yy7juwoY5ttQ8+6tkCzDoyDN71n2m8BiG8qeFLYQF1joMiiPE8ItGYu0Tkn98aGxA==",
+      "version": "0.102.0",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.0.tgz",
+      "integrity": "sha512-gJeDdC4W0x/+a8rf7pz8L/NheEeHIKrtLIHFwMumX04UAFYUA065A4uQmDjRspsMdQ9muwB9eQfOwTSjqaYyrQ==",
      "dev": true,
      "requires": {
        "@xhmikosr/bin-wrapper": "^5.0.1",
-        "pkg-conf": "^4.0.0",
-        "rimraf": "^3.0.2"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.2.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.1.1",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
+        "pkg-conf": "^4.0.0"
      }
    },
    "human-signals": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.10.0",
+  "version": "0.11.0",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -63,7 +63,7 @@
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "flexsearch": "^0.7.31",
-    "hugo-bin": "^0.101.5",
+    "hugo-bin": "^0.102.0",
    "markdownlint-cli2": "^0.6.0",
    "postcss-cli": "^10.1.0",
    "purgecss-whitelister": "^2.4.0",
Author	SHA1	Message	Date
Mark Dumay	d6357b70ae	Merge pull request #195 from gethinode/develop Multi-level sidebar nav	2023-04-05 09:05:08 +02:00
mark	eb000e9f81	Fix linting issues	2023-04-05 08:51:38 +02:00
mark	efe9c2e06e	Bump release version	2023-04-05 08:39:41 +02:00
mark	4c41cbcafb	Enable nested sidebar navigation	2023-04-05 08:39:24 +02:00
mark	1910af163d	Move API to enable utilities in theme styles	2023-04-05 08:31:21 +02:00
Mark Dumay	cba1566ba1	Merge pull request #194 from gethinode/develop Bump dependencies	2023-04-03 15:27:27 +02:00
mark	69abe3ec0c	Bump dependencies	2023-04-03 15:19:08 +02:00