Merge pull request #617 from h-enk/section-menu

feat: add multi level section menu
thuliteio · Jan 26, 2022 · 54d04d5 · 54d04d5
2 parents 40a8705 + 5cf9787
commit 54d04d5
Show file tree

Hide file tree

Showing 16 changed files with 320 additions and 39 deletions.
diff --git a/config/_default/menus/menus.en.toml b/config/_default/menus/menus.en.toml
@@ -10,6 +10,12 @@
   identifier = "help"
   url = "/docs/help/"
 
+[[docs]]
+  name = "Lorem"
+  weight = 70
+  identifier = "lorem"
+  url = "/docs/lorem/"
+
 [[main]]
   name = "Docs"
   url = "/docs/prologue/introduction/"

diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -84,6 +84,11 @@ lastMod = false
   breadCrumb = false
   highLight = true
   kaTex = false
-  collapsibleSidebar = true
   multilingualMode = false
   docsVersioning = false
+
+[menu]
+  [menu.section]
+    auto = true
+    collapsibleSidebar = true
+    mainSections = ["docs"]
diff --git a/content/en/docs/lorem/_index.md b/content/en/docs/lorem/_index.md
@@ -0,0 +1,10 @@
+---
+title: "Lorem"
+description: ""
+lead: ""
+date: 2022-01-18T19:58:14+01:00
+lastmod: 2022-01-18T19:58:14+01:00
+draft: true
+images: []
+toc: true
+---
diff --git a/content/en/docs/lorem/ipsum/_index.md b/content/en/docs/lorem/ipsum/_index.md
@@ -0,0 +1,15 @@
+---
+title: "Ipsum"
+description: ""
+lead: ""
+date: 2022-01-18T20:00:32+01:00
+lastmod: 2022-01-18T20:00:32+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "lorem"
+    identifier: "ipsum"
+weight: 999
+toc: true
+---
diff --git a/content/en/docs/lorem/ipsum/amet/_index.md b/content/en/docs/lorem/ipsum/amet/_index.md
@@ -0,0 +1,15 @@
+---
+title: "Amet"
+description: ""
+lead: ""
+date: 2022-01-18T20:07:56+01:00
+lastmod: 2022-01-18T20:07:56+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "ipsum"
+    identifier: "amet"
+weight: 999
+toc: true
+---
diff --git a/content/en/docs/lorem/ipsum/amet/consectetur/index.md b/content/en/docs/lorem/ipsum/amet/consectetur/index.md
@@ -0,0 +1,14 @@
+---
+title: "Consectetur"
+description: ""
+lead: ""
+date: 2022-01-18T20:17:32+01:00
+lastmod: 2022-01-18T20:17:32+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "amet"
+weight: 730
+toc: true
+---
diff --git a/content/en/docs/lorem/ipsum/dolor/index.md b/content/en/docs/lorem/ipsum/dolor/index.md
@@ -0,0 +1,14 @@
+---
+title: "Dolor"
+description: ""
+lead: ""
+date: 2022-01-18T20:01:45+01:00
+lastmod: 2022-01-18T20:01:45+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "ipsum"
+weight: 700
+toc: true
+---
diff --git a/content/en/docs/lorem/ipsum/sit/index.md b/content/en/docs/lorem/ipsum/sit/index.md
@@ -0,0 +1,14 @@
+---
+title: "Sit"
+description: ""
+lead: ""
+date: 2022-01-18T20:05:19+01:00
+lastmod: 2022-01-18T20:05:19+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "ipsum"
+weight: 710
+toc: true
+---
diff --git a/content/en/tutorial/_index.md b/content/en/tutorial/_index.md
@@ -0,0 +1,8 @@
+---
+title: "Tutorial"
+description: ""
+date: 2022-01-25T14:40:56+01:00
+lastmod: 2022-01-25T14:40:56+01:00
+draft: false
+images: []
+---
diff --git a/content/en/tutorial/lorem/_index.md b/content/en/tutorial/lorem/_index.md
@@ -0,0 +1,8 @@
+---
+title: "Lorem"
+description: ""
+date: 2022-01-25T14:41:21+01:00
+lastmod: 2022-01-25T14:41:21+01:00
+draft: false
+images: []
+---
diff --git a/content/en/tutorial/lorem/ipsum/index.md b/content/en/tutorial/lorem/ipsum/index.md
@@ -0,0 +1,8 @@
+---
+title: "Ipsum"
+description: ""
+date: 2022-01-25T14:41:39+01:00
+lastmod: 2022-01-25T14:41:39+01:00
+draft: false
+images: []
+---
diff --git a/layouts/partials/sidebar/auto-collapsible-menu.html b/layouts/partials/sidebar/auto-collapsible-menu.html
@@ -0,0 +1,56 @@
+<!-- Auto collapsible section menu -->
+<ul class="list-unstyled collapsible-sidebar">
+  {{ $currentPage := . -}}
+  {{ range (where .Site.Sections "Section" "in" site.Params.menu.section.mainSections) }}
+    {{ range .Sections.Reverse }}
+      {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ md5 .Title }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
+          {{ .Title }}
+        </button>
+        <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ md5 .Title }}">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            {{ range .Pages }}
+              {{ if .IsNode }}
+                {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                <li class="my-1 ms-3">
+                  <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ md5 .Title }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
+                    {{ .Title }}
+                  </button>
+                  <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ md5 .Title }}">
+                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                      {{ range .Pages }}
+                        {{ if .IsNode }}
+                          {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                          <li class="my-1 ms-3">
+                            <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ md5 .Title }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
+                              {{ .Title }}
+                            </button>
+                            <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ md5 .Title }}">
+                              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                                {{ range .Pages }}
+                                  {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                                  <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .Permalink }}">{{ .Title }}</a></li>
+                                {{ end }}
+                              </ul>
+                            </div>
+                          </li>
+                        {{ else }}
+                          {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                          <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .Permalink }}">{{ .Title }}</a></li>
+                        {{ end }}
+                      {{ end }}
+                    </ul>
+                  </div>
+                </li>
+              {{ else }}
+                {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .Permalink }}">{{ .Title }}</a></li>
+              {{ end }}
+            {{ end }}
+          </ul>
+        </div>
+      </li>
+    {{ end }}
+  {{ end }}
+</ul>
diff --git a/layouts/partials/sidebar/auto-default-menu.html b/layouts/partials/sidebar/auto-default-menu.html
@@ -0,0 +1,36 @@
+<!-- Auto default section menu -->
+{{ $currentPage := . -}}
+{{ range (where .Site.Sections "Section" "in" site.Params.menu.section.mainSections) }}
+  {{ range .Sections.Reverse }}
+    {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+    <h3 class="h6 text-uppercase mb-2">{{ .Title }}</h3>
+    <ul class="list-unstyled">
+      {{ range .Pages }}
+        {{ if .IsNode }}
+          {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+          <h4 class="h6 text-uppercase ms-3 mt-3 mb-2">{{ .Title }}</h4>
+          <ul class="list-unstyled ms-3">
+            {{ range .Pages }}
+              {{ if .IsNode }}
+                {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                <h5 class="h6 text-uppercase mt-2 mb-2">{{ .Title }}</h5>
+                <ul class="list-unstyled ms-3">
+                  {{ range .Pages }}
+                    {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                    <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+                  {{ end }}
+                </ul>
+              {{ else }}
+                {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+                <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+              {{ end }}
+            {{ end }}
+          </ul>
+        {{ else }}
+          {{ $active := in $currentPage.RelPermalink .RelPermalink }}
+          <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+        {{ end }}
+      {{ end }}
+    </ul>
+  {{ end }}
+{{ end }}
diff --git a/layouts/partials/sidebar/docs-menu.html b/layouts/partials/sidebar/docs-menu.html
@@ -1,39 +1,9 @@
-{{ if .Site.Params.options.collapsibleSidebar -}}
-  <ul class="list-unstyled collapsible-sidebar">
-  {{ $currentPage := . -}}
-  {{ range $index, $element := .Site.Menus.docs -}}
-  {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
-  {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
-    <li class="mb-1">
-      <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ .Identifier }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
-        {{ .Name }}
-      </button>
-      {{ if .HasChildren -}}
-      <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ .Identifier }}">
-        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-        {{ range .Children -}}
-          {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
-          {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
-          <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
-        {{ end -}}
-        </ul>
-      </div>
-      {{ end -}}
-    </li>
-  {{ end -}}
-  </ul>
-{{ else -}}
-  {{ $currentPage := . -}}
-  {{ range .Site.Menus.docs -}}
-    <h3 class="h6 text-uppercase">{{ .Name }}</h3>
-    {{ if .HasChildren -}}
-    <ul class="list-unstyled">
-      {{ range .Children -}}
-        {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
-        {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
-        <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
-      {{ end -}}
-    </ul>
-    {{ end -}}
-  {{ end -}}
+{{ if and .Site.Params.menu.section.auto .Site.Params.menu.section.collapsibleSidebar -}}
+  {{ partial "sidebar/auto-collapsible-menu.html" . -}}
+{{ else if and .Site.Params.menu.section.auto (not .Site.Params.menu.section.collapsibleSidebar) -}}
+  {{ partial "sidebar/auto-default-menu.html" . -}}
+{{ else if and (not .Site.Params.menu.section.auto) .Site.Params.menu.section.collapsibleSidebar -}}
+  {{ partial "sidebar/manual-collapsible-menu.html" . -}}
+{{ else if and (not .Site.Params.menu.section.auto) (not .Site.Params.menu.section.collapsibleSidebar) -}}
+  {{ partial "sidebar/manual-default-menu.html" . -}}
 {{ end -}}
diff --git a/layouts/partials/sidebar/manual-collapsible-menu.html b/layouts/partials/sidebar/manual-collapsible-menu.html
@@ -0,0 +1,62 @@
+<!-- Manual collapsible section menu -->
+<ul class="list-unstyled collapsible-sidebar">
+  {{ $currentPage := . -}}
+  {{ range $index, $element := .Site.Menus.docs -}}
+    {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+    {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+    <li class="mb-1">
+      <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ .Identifier }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
+        {{ .Name }}
+      </button>
+      {{ if .HasChildren -}}
+        <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ .Identifier }}">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            {{ range .Children -}}
+              {{ if .HasChildren -}}
+                <li class="my-1 ms-3">
+                  <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ .Identifier }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
+                    {{ .Name }}
+                  </button>
+                  {{ if .HasChildren -}}
+                    <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ .Identifier }}">
+                      <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                        {{ range .Children -}}
+                          {{ if .HasChildren -}}
+                            <li class="my-1 ms-3">
+                              <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ .Identifier }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
+                                {{ .Name }}
+                              </button>
+                              {{ if .HasChildren -}}
+                                <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ .Identifier }}">
+                                  <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                                  {{ range .Children -}}
+                                    {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+                                    {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+                                    <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+                                  {{ end -}}
+                                  </ul>
+                                </div>
+                              {{ end -}}
+                            </li>
+                          {{ else -}}
+                            {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+                            {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+                            <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+                          {{ end -}}
+                        {{ end -}}
+                      </ul>
+                    </div>
+                  {{ end -}}
+                </li>
+              {{ else -}}
+                {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+                {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+                <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+              {{ end -}}
+            {{ end -}}
+          </ul>
+        </div>
+      {{ end -}}
+    </li>
+  {{ end -}}
+</ul>
diff --git a/layouts/partials/sidebar/manual-default-menu.html b/layouts/partials/sidebar/manual-default-menu.html
@@ -0,0 +1,40 @@
+<!-- Manual default section menu -->
+{{ $currentPage := . -}}
+{{ range .Site.Menus.docs -}}
+  <h3 class="h6 text-uppercase mb-2">{{ .Name }}</h3>
+  {{ if .HasChildren -}}
+    <ul class="list-unstyled">
+      {{ range .Children -}}
+        {{ if .HasChildren -}}
+          <h4 class="h6 text-uppercase ms-3 mt-3 mb-2">{{ .Name }}</h4>
+          {{ if .HasChildren -}}
+            <ul class="list-unstyled ms-3">
+              {{ range .Children -}}
+                {{ if .HasChildren -}}
+                  <h5 class="h6 text-uppercase mt-2 mb-2">{{ .Name }}</h5>
+                  {{ if .HasChildren -}}
+                    <ul class="list-unstyled ms-3">
+                      {{ range .Children -}}
+                        {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+                        {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+                        <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+                      {{ end -}}
+                    </ul>
+                  {{ end -}}
+                {{ else -}}
+                  {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+                  {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+                  <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+                {{ end -}}
+              {{ end -}}
+            </ul>
+          {{ end -}}
+        {{ else -}}
+          {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+          {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+          <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+        {{ end -}}
+      {{ end -}}
+    </ul>
+  {{ end -}}
+{{ end -}}