sidebar.html

<input type="checkbox" id="hamburger" class="hamburger-btn">
<label for="hamburger" class="hamburger-btn">≡</label>
<nav id="seitenleiste">
	<div style="margin: 10px;">
		<h2 id="überschrift">{{ T "toc" }}</h2>

		<a href="/Bedienungsanleitung">Die Deutsche<br>Programmiersprache</a>

		<ol id="artikel-links">
			{{ define "links" -}}
				{{- range .page.Pages -}}
					{{- if .IsSection -}}
						<li>
							<details id="Section-{{ .Title }}" {{ if (in $.ancestors .) }} open {{ end }}>
								<summary><a href="{{ .RelPermalink }}">{{ .Title }}</a></summary>
								<ol>
									{{ template "links" (dict "page" . "ancestors" $.ancestors) }}
								</ol>
							</details>
						</li>
					{{ else }}
						<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
					{{- end -}}
				{{- end -}}
			{{- end -}}

			{{- template "links" (dict "page" (.GetPage "") "ancestors" .Ancestors) -}}
			<script>
				const details = document.querySelectorAll('#artikel-links details');
				for (const detail of details) {
					detail.open = window.localStorage.getItem(detail.id) === "true";

					detail.addEventListener('toggle', (event) => {
						window.localStorage.setItem(event.target.id, event.target.open);
					})
				}
			</script>
		</ol>
	</div>
</nav>
<script>
	const sbtop = localStorage.getItem("sidebar-scroll");
	if (sbtop !== null) {
		document.getElementById("seitenleiste").scrollTop = parseInt(sbtop, 10);
	}
</script>