setup: separate section menu logic from menu building

This commit is contained in:
Henk Verlinde 2022-01-25 16:27:13 +01:00
parent 3e384f393d
commit ab5584984a
9 changed files with 190 additions and 166 deletions

View File

@ -74,10 +74,6 @@ docsRepoBranch = "master"
editPage = false editPage = false
lastMod = false lastMod = false
mainSections = ["docs"]
[options] [options]
lazySizes = true lazySizes = true
clipBoard = true clipBoard = true
@ -93,5 +89,6 @@ mainSections = ["docs"]
[menu] [menu]
[menu.section] [menu.section]
auto = true auto = false
collapsibleSidebar = true collapsibleSidebar = true
mainSections = ["docs", "tutorial"]

View File

@ -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: []
---

View File

@ -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: []
---

View File

@ -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: []
---

View File

@ -0,0 +1,56 @@
<!-- Auto collapsible section menu, multi level -->
<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>

View File

@ -0,0 +1 @@
<!-- Auto default section menu, single level -->

View File

@ -1,165 +1,9 @@
{{ if and .Site.Params.menu.section.auto .Site.Params.menu.section.collapsibleSidebar -}} {{ if and .Site.Params.menu.section.auto .Site.Params.menu.section.collapsibleSidebar -}}
<!-- Auto collapsibile section menu, multi level --> {{ partial "sidebar/auto-collapsible-menu.html" . -}}
<ul class="list-unstyled collapsible-sidebar">
{{ $currentPage := . -}}
{{ range (where .Site.Sections "Type" "in" site.Params.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>
{{ else if and .Site.Params.menu.section.auto (not .Site.Params.menu.section.collapsibleSidebar) -}} {{ else if and .Site.Params.menu.section.auto (not .Site.Params.menu.section.collapsibleSidebar) -}}
<!-- Auto default section menu, single level --> {{ partial "sidebar/auto-default-menu.html" . -}}
{{ else if and (not .Site.Params.menu.section.auto) .Site.Params.menu.section.collapsibleSidebar -}} {{ else if and (not .Site.Params.menu.section.auto) .Site.Params.menu.section.collapsibleSidebar -}}
<!-- Manual collapsibile section menu, multi level --> {{ partial "sidebar/manual-collapsible-menu.html" . -}}
<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>
{{ else if and (not .Site.Params.menu.section.auto) (not .Site.Params.menu.section.collapsibleSidebar) -}} {{ else if and (not .Site.Params.menu.section.auto) (not .Site.Params.menu.section.collapsibleSidebar) -}}
<!-- Manual default section menu, single level --> {{ partial "sidebar/manual-default-menu.html" . -}}
{{ $currentPage := . -}} {{ end -}}
{{ 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 -}}
{{ end -}}

View File

@ -0,0 +1,62 @@
<!-- Manual collapsibile section menu, multi level -->
<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>

View File

@ -0,0 +1,40 @@
<!-- Manual default section menu, single level -->
{{ $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 -}}