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 flex flex-col">
  <div class="block py-4 text-gray-200 md:hidden dark:text-gray-200">
    This section
  </div>
  <ul>
    {{ template "renderChildren" .FirstSection }}
  </ul>
</nav>

{{ define "renderChildren" }}
  {{- $pages := where .Pages "Params.sitemap" "ne" "false" }}
  {{- if .Params.sidebar.reverse }}
    {{ $pages = .Pages.Reverse }}
  {{- end }}
  {{- $ungrouped := where $pages "Params.sidebar.group" "==" nil }}
  {{- range $ungrouped }}
    {{- if .IsSection }}
      {{- template "renderList" . }}
    {{- else }}
      {{- template "renderSingle" . }}
    {{- end }}
  {{- end }}
  {{- range .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" . }}
        {{- else }}
          {{- template "renderSingle" . }}
        {{- end }}
      {{- end }}
    </div>
  {{- end }}

{{ end }}

{{/* Recursive template for sidebar items */}}
{{ define "renderList" }}
  {{ $isCurrent := eq page . }}
  {{ $expanded := or $isCurrent (page.IsDescendant .) }}
  <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 .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="{{ .Permalink }}"
          >
            {{ template "renderTitle" . }}
          </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" . }}
          </button>
        {{- end }}
      </div>
      <!-- Expand group button -->
      <button
        @click="expanded = !expanded"
        class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800"
      >
        <span
          :class="{ 'hidden' : expanded }"
          class="icon-svg {{ if $expanded }}hidden{{ end }}"
        >
          {{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}
        </span>
        <span
          :class="{ 'hidden' : !expanded }"
          class="icon-svg {{ if not $expanded }}hidden{{ end }}"
        >
          {{ partialCached "icon" "arrow_drop_up" "arrow_drop_up" }}
        </span>
      </button>
    </div>
    <ul
      :class="{ 'hidden' : !expanded }"
      class="{{ if not $expanded }}hidden{{ end }} ml-3"
    >
      {{ template "renderChildren" . }}
    </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 }}