{{/* The tree and table of contents render twice, so Hugo's id on the table of contents goes. */}}
{{ $toc := replace .TableOfContents ` id="TableOfContents"` "" | safeHTML }}
{{ $hasToc := gt (len .Fragments.Headings) 0 }}
<div class="lg:hidden mb-8 space-y-2">
  <details class="border border-border p-3">
    <summary class="font-mono cursor-pointer">{{ i18n "docsMenu" }}</summary>
    <div class="mt-3">{{ partial "docs-tree.html" . }}</div>
  </details>
  {{ if $hasToc }}
  <details class="border border-border p-3">
    <summary class="font-mono cursor-pointer">{{ i18n "docsOnThisPage" }}</summary>
    <div class="mt-3 text-sm text-text-dim">{{ $toc }}</div>
  </details>
  {{ end }}
</div>
<aside class="hidden lg:block lg:sticky lg:top-24 lg:self-start lg:max-h-[calc(100vh-7rem)] lg:overflow-y-auto"
       aria-label="{{ i18n "docsMenu" }}">
  {{ partial "docs-tree.html" . }}
  {{ if $hasToc }}
  <div class="mt-8 border-t border-border pt-4 text-sm text-text-dim">
    <p class="font-mono text-accent mb-2">{{ i18n "docsOnThisPage" }}</p>
    {{ $toc }}
  </div>
  {{ end }}
</aside>