1{{- $toc := .TableOfContents -}}
2{{- if and $toc (strings.Contains $toc "<li>") }}
3 {{- /* No-JS / desktop: a plain <details> box / sticky sidebar. With JS on
4 small screens (see _post-toc.scss) the <summary> is a static bottom-
5 right circle and .post-toc__sheet is an overlay that covers it. */ -}}
6 <details class="post-toc" data-post-toc>
7 <summary class="post-toc__summary" aria-label="Table of contents">
8 <svg class="post-toc__burger" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
9 <line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/>
10 </svg>
11 <span class="post-toc__label">Table of contents</span>
12 <span class="post-toc__chevron" aria-hidden="true"></span>
13 </summary>
14 <div class="post-toc__sheet">
15 <div class="post-toc__header">
16 <span class="post-toc__title">Contents</span>
17 <button type="button" class="post-toc__close" data-toc-close aria-label="Close table of contents">x</button>
18 </div>
19 <nav class="post-toc__body" aria-label="Table of contents">
20 {{ $toc | safeHTML }}
21 </nav>
22 </div>
23 </details>
24{{- end }}