docs/layouts/_partials/sidebar/sections.html

{{- /*
  This template recursively renders the sidebar navigation, grouping pages by `Params.sidebar.groups`.
  Highlights:
  - Supports hierarchical navigation with collapsible sections (`renderList` template).
  - Dynamically applies current page highlighting and expanded states.
  - Handles external links via `Params.sidebar.goto` in `renderSingle`.
  - Requires `Params.sitemap` and `Params.sidebar` for filtering and behavior.
  */
-}}
<!-- section tree -->
<nav class="navbar-font mx-1 mt-1 flex flex-col">
  <ul>
    {{ template "renderChildren" (dict "section" .FirstSection "revealHidden" false) }}
  </ul>
</nav>

{{ define "renderChildren" }}
  {{- $section := .section }}
  {{- $revealHidden := .revealHidden }}
  {{- $sourcePages := $section.Pages }}
  {{- if $section.Params.sidebar.reverse }}
    {{ $sourcePages = $sourcePages.Reverse }}
  {{- end }}
  {{- $pages := slice }}
  {{- range $sourcePages }}
    {{- $isActive := or (eq page .) (page.IsDescendant .) }}
    {{- if or (ne .Params.sitemap false) $isActive $revealHidden }}
      {{- $pages = $pages | append . }}
    {{- end }}
  {{- end }}
  {{- $ungrouped := where $pages "Params.sidebar.group" "==" nil }}
  {{- range $ungrouped }}
    {{- if .IsSection }}
      {{- template "renderList" (dict "section" . "revealHidden" $revealHidden) }}
    {{- else }}
      {{- template "renderSingle" . }}
    {{- end }}
  {{- end }}
  {{- range $section.Params.sidebar.groups }}
    <!--  Main titles -->
    <div class="navbar-group">
      <li class="navbar-group-font-title">
        {{ . }}
      </li>
      {{- range where $pages "Params.sidebar.group" . }}
        {{- if .IsSection }}
          {{- template "renderList" (dict "section" . "revealHidden" $revealHidden) }}
        {{- else }}
          {{- template "renderSingle" . }}
        {{- end }}
      {{- end }}
    </div>
  {{- end }}

{{ end }}

{{/* Recursive template for sidebar items */}}
{{ define "renderList" }}
  {{- $section := .section }}
  {{- $isCurrent := eq page $section }}
  {{- $expanded := or $isCurrent (page.IsDescendant $section) }}
  {{- $revealHidden := or .revealHidden (and (eq $section.Params.sitemap false) $expanded) }}
  <li class="" x-data="{ expanded: {{ $expanded }} }">
    <div
      class="{{ if $isCurrent }}
        navbar-entry-background-current
      {{ end }} flex w-full items-center justify-between rounded-sm"
    >
      <div class="navbar-entry-margin w-full truncate">
        {{- if $section.Permalink }}
          {{/* If the link is not empty, use it */}}
          <!-- Sections that have children and linking to a page -->
          <a
            {{ if $isCurrent }}
              aria-current="page" id="sidebar-current-page"
            {{ end }}
            class="hover:text-blue block select-none hover:dark:text-blue-400"
            href="{{ $section.Permalink }}"
          >
            {{ template "renderTitle" $section }}
          </a>
        {{- else }}
          {{/* Otherwise, just expand the section */}}
          <!-- Sections that have children and do not link to a page -->
          <button
            @click="expanded = !expanded"
            class="hover:text-blue w-full text-left select-none hover:dark:text-blue-400"
          >
            {{ template "renderTitle" $section }}
          </button>
        {{- end }}
      </div>
      {{/* Only show expand group button if section has children */}}
      {{- $children := slice }}
      {{- range $section.Pages }}
        {{- $isActive := or (eq page .) (page.IsDescendant .) }}
        {{- if or (ne .Params.sitemap false) $isActive $revealHidden }}
          {{- $children = $children | append . }}
        {{- end }}
      {{- end }}
      {{- $hasChildren := gt (len $children) 0 }}
      {{- if $hasChildren }}
        <!-- Expand group button -->
        <button
          @click="expanded = !expanded"
          class="rounded-sm px-1 hover:bg-gray-200 hover:dark:bg-gray-800"
        >
          <span
            :class="{ 'hidden' : expanded }"
            class="icon-svg icon-sm {{ if $expanded }}hidden{{ end }}"
          >
            {{ partialCached "icon" "chevron-down" "chevron-down" }}
          </span>
          <span
            :class="{ 'hidden' : !expanded }"
            class="icon-svg icon-sm {{ if not $expanded }}hidden{{ end }}"
          >
            {{ partialCached "icon" "chevron-up" "chevron-up" }}
          </span>
        </button>
      {{- end }}
    </div>
    <ul
      :class="{ 'hidden' : !expanded }"
      class="{{ if not $expanded }}hidden{{ end }} ml-3"
    >
      {{ template "renderChildren" (dict "section" $section "revealHidden" $revealHidden) }}
    </ul>
  </li>
{{ end }}

{{ define "renderSingle" }}
  {{- if .Params.sidebar.goto }}
    <li class="navbar-entry-margin hover:text-blue hover:dark:text-blue-400">
      <a
        class="block w-full truncate"
        href="{{ .Params.sidebar.goto }}"
        title="{{ .LinkTitle }}"
      >
        {{ template "renderTitle" . }}
      </a>
    </li>
  {{- else }}
    {{ $isCurrent := eq page . }}
    <li
      class="navbar-entry-margin hover:text-blue {{ if $isCurrent }}
        navbar-entry-background-current
      {{ end }} rounded-sm hover:dark:text-blue-400"
    >
      <a
        {{ if $isCurrent }}
          aria-current="page" id="sidebar-current-page"
        {{ end }}
        class="block w-full truncate"
        href="{{ .Permalink }}"
        title="{{ .LinkTitle }}"
      >
        {{ template "renderTitle" . }}
      </a>
    </li>
  {{- end }}
{{ end }}

{{ define "renderTitle" }}
  {{ .LinkTitle }}
  {{- with .Params.sidebar.badge }}
    <span>
      {{- partial "components/badge.html" (dict "color" .color "content" .text) }}
    </span>
  {{- end }}
{{ end }}