hugo-theme-paradox/layouts/partials/nav-docs.html

<nav class="docs-nav">
	<div class="container">
		<input type="checkbox" class="toggle-menu" name="toggle" id="toggle">
		<label class="toggle-menu__label" for="toggle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
				fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
			</svg> Documentation Menu</label>
		<ul class="menu">
			<a id="menu" href="#top">Skip menu</a>
			{{ $currentPage := .Page }}
			{{ range .Site.Menus.docs }}
				{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
				<details {{- if $active }} open{{ end -}}>
					{{ if .HasChildren }}
					<summary class='section-title{{- if $active }} active{{ end -}}'>
						<a>
						{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
						</a>
					</summary>
					<ul class="sub-menu" data-depth=1>
					{{ range .Children }}
					{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
						{{ if .HasChildren}}
							<li class='{{- if $active }}active{{ end -}}'>
							<a href="{{ .URL | relLangURL }}">
							{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
							</a>
							<ul class="sub-menu" data-depth=2>
							{{ range .Children }}
							{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
								<li class='{{- if $active }}active{{ end -}}'>
								<a href="{{ .URL | relLangURL }}">
								{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
								</a>
								</li>
							{{ end }}{{/* range .Children (subsubmenu) */}}
							</ul>
						{{ else }}{{/* not .HasChildren (subsubmenu) */}}
							<li class='{{- if $active }}active{{ end -}}'>
							<a href="{{ .URL | relLangURL }}">
							{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
							</a>
							</li>
						{{ end }}{{/* range .Children */}}
					{{ end }}
			</ul>
			{{ else }}
			<li class='{{- if $active }}active{{ end -}}'>
				<a href="{{ .URL | relLangURL }}">
					{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
				</a>
			</li>
			{{ end }}
		</details>
		{{ end }}
		</ul>
	</div>
</nav>