Commit f0edb031 authored by Henk Verlinde's avatar Henk Verlinde
Browse files

feat: add auto collapsibile multi level section menu

parent 44a41db7

config/_default/params.toml

+10 −1
Original line number Diff line number Diff line
@@ -74,6 +74,10 @@ docsRepoBranch = "master" 
editPage = false

lastMod = false





mainSections = ["docs"]





[options]

  lazySizes = true

  clipBoard = true
@@ -84,6 +88,11 @@ lastMod = false 
  breadCrumb = true

  highLight = true

  kaTex = false

  collapsibleSidebar = true

  multilingualMode = false

  docsVersioning = false



[menu]



  [menu.section]

    auto = false

    collapsibleSidebar = false

layouts/partials/sidebar/docs-menu.html

+64 −2
Original line number Diff line number Diff line 
{{ if .Site.Params.options.collapsibleSidebar -}}

{{ if and .Site.Params.menu.section.auto .Site.Params.menu.section.collapsibleSidebar -}}

  <!-- Auto collapsibile section menu, multi level -->

  <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) -}}

  <!-- Auto default section menu, single level -->



{{ else if and (not .Site.Params.menu.section.auto) .Site.Params.menu.section.collapsibleSidebar -}}

  <!-- Manual collapsibile section menu, multi level -->

  <ul class="list-unstyled collapsible-sidebar">

    {{ $currentPage := . -}}

    {{ range $index, $element := .Site.Menus.docs -}}
@@ -60,7 +121,8 @@ 
      </li>

    {{ end -}}

  </ul>

{{ else -}}

{{ else if and (not .Site.Params.menu.section.auto) (not .Site.Params.menu.section.collapsibleSidebar) -}}

  <!-- Manual default section menu, single level -->

  {{ $currentPage := . -}}

  {{ range .Site.Menus.docs -}}

    <h3 class="h6 text-uppercase">{{ .Name }}</h3>