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

<nav class="docs-nav">
	<div class="container">
		{{ if in .Site.Params.search.showIn "nav" }}
		{{ partial "search/search-form.html" . }}
		{{ end }}
		{{- /* Toggle menu visibility */}}
		<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>
			<span>Documentation Menu</span>
		</label>
		{{- /* Navigation menu items */}}
		<ul class="menu" data-depth="0">
			<a id="menu" href="#top">Skip menu</a>
			{{ $currentPage := .Page -}}
			{{- range .Site.Menus.docs -}}
				{{- if not .HasChildren -}}{{/* depth 0, stop */}}
					{{- $active := and (hasPrefix $currentPage.RelPermalink .Page.RelPermalink) (not (eq .Page.RelPermalink "/")) }}
					<li class='{{- if $active }}active{{ end -}}' data-depth="0">
						<a href="{{ .URL | relLangURL }}" data-depth="0">
							{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
						</a>
					</li>
				{{- else -}}{{/* depth 0, going to depth 1 */}}
					{{- $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
					<details {{- if $active }} open{{ end }} data-depth="0">
						<summary class='section-title{{- if $active }} active{{ end -}}'>
							<a data-depth="0">
								{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
							</a>
						</summary>
						<ul class="sub-menu" data-depth=1>
							{{ range .Children }}
								{{ if not .HasChildren}}{{/* depth 1, stop */}}
									{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
									<li class='{{- if $active }}active{{ end -}}' data-depth="1">
									<a href="{{ .URL | relLangURL }}" data-depth="1">
										{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
									</a>
									</li>
								{{ else }}{{/* depth 1, going to depth 2 */}}
									{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
									<li class='{{- if $active }}active{{ end -}}' data-depth="1">
										<a href="{{ .URL | relLangURL }}" data-depth="1">
											{{ .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 -}}' data-depth="2">
													<a href="{{ .URL | relLangURL }}" data-depth="2">
														{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
													</a>
												</li>
											{{ end }}{{/* done with depth 2 */}}
										</ul>
									</li>
									
								{{ end }}{{/* done with depth 1 */}}
								
							{{ end }}{{/* done with submenu */}}
						</ul>
					</details>
				{{ end }}{{/* done with depth 0 */}}
		
			{{ end }}{{/* done with menu */}}
		</ul>
	</div>
</nav>