{{- /*
  Complements the section-specific sidebar navigation.
  - Renders the main navigation for site sections, linking to the current or ancestor section/page.
  - Uses the `site.Menus.main` configuration to determine primary navigation structure.
  - Toggles visibility of nested menu items for the main sections.
  */
-}}
<!-- Main navigation for the sidebar -->
<div class="px-2 py-4 md:hidden text-gray-700 dark:text-gray-200 card " x-data="{ expanded: false }">
  <div class="flex w-full items-center justify-between">
    <!-- Current section: use menu, fall back to current section or page -->
    {{- $curr := .FirstSection }}
    {{- if eq $curr site.Home }}
      {{- $curr = . }}
    {{- end }}
    {{- range site.Menus.main }}
      {{- if or (.Page.IsAncestor page) (eq .Page page) }}
        {{- $curr = .Page }}
      {{- end }}
    {{- end }}
    <a
      class="hover:text-blue dark:hover:text-blue"
      href="{{ $curr.Permalink }}"
    >
      {{- with $curr.Params.icon }}
        <span class="icon-sm icon-svg pr-2">
          {{- partialCached "icon.html" . . -}}
        </span>
      {{- end }}
      {{- $curr.LinkTitle -}}
    </a>
    <button
      @click="expanded = !expanded"
      class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800"
    >
      <span x-show="! expanded" class="icon-svg">
        {{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}
      </span>
      <span x-cloak x-show="expanded" class="icon-svg">
        {{ partialCached "icon" "arrow_drop_up" "arrow_drop_up" }}
      </span>
    </button>
  </div>
  <ul x-cloak x-show="expanded" class="space-y-4 pt-4">
    {{ range site.Menus.main }}
      {{ if ne page.FirstSection .Page }}
        <li>
          <a class="hover:text-blue dark:hover:text-blue" href="{{ .URL }}">
            {{- with .Page.Params.icon }}
              <span class="icon-sm icon-svg pr-2">
                {{- partialCached "icon.html" . . -}}
              </span>
            {{- end }}
            {{- .Name }}
          </a>
        </li>
      {{ end }}
    {{ end }}
  </ul>
</div>

