hextra/layouts/partials/sidebar.html

<aside class="flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:sticky md:self-start max-md:[transform:translate3d(0,-100%,0)]">
  <div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-4rem-3.75rem)]">
    <ul class="flex flex-col gap-1 max-md:hidden">
      {{- $s := .FirstSection -}}
      {{- $topLevelItems := union $s.RegularPages $s.Sections -}}
      {{- $currentUrl := .RelPermalink -}}

      {{- range $topLevelItems.ByWeight -}}
        {{- $isCurrent := eq $currentUrl .RelPermalink -}}
        {{- $title := .LinkTitle | default .File.BaseFileName -}}
        <li class="open">
          {{- if $isCurrent -}}
            <a
              class="flex cursor-pointer items-center justify-between gap-2 rounded bg-primary-100 px-2 py-1.5 text-sm font-semibold text-primary-800 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500"
              href="{{ .RelPermalink }}"
            >
              {{- $title -}}
            </a>
          {{ else }}
            <a
              class="flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-sm text-gray-500 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50"
              href="{{ .RelPermalink }}"
              >{{- $title -}}
            </a>
          {{- end -}}
        </li>
        {{ $secondLevelItems := union .RegularPages .Sections }}
        {{ with $secondLevelItems }}
          <div class="pt-1 ltr:pr-0">
            <ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
              {{ range $secondLevelItems.ByWeight }}
                {{ $isCurrent := eq $currentUrl .RelPermalink }}
                <li class="flex flex-col gap-1">
                  <a
                    class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
                  {{ if eq $currentUrl .RelPermalink }}
                      bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
                    {{ else }}
                      text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
                    {{ end }}"
                    href="{{ .RelPermalink }}"
                  >
                    {{ .LinkTitle | default .File.BaseFileName }}
                  </a>
                </li>
              {{ end }}
            </ul>
          </div>
        {{ end }}
      {{ end }}
    </ul>
  </div>
  <!-- theme switch button -->
  <div class="sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
    <div class="grow flex flex-col">
      <button title="Change theme" class="h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" id="theme-toggle" type="button" aria-label="Toggle Dark Mode">
        <div id="theme-toggle-light-icon" class="hidden flex items-center gap-2 capitalize">
          {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12") -}}
          <span>Light</span>
        </div>
        <div id="theme-toggle-dark-icon" class="hidden flex items-center gap-2 capitalize">
          {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12") -}}
          <span>Dark</span>
        </div>
      </button>
    </div>
  </div>
</aside>