<a
	class="navbar-burger m-2 mt-6 block rounded-sm bg-gray-200 py-2 px-1 text-center lg:hidden"
	data-target="docsMenu"
>
	Show Menu
</a>

<aside class="hidden px-2 text-gray-600 lg:block" id="docsMenu">
	{{ $currentNode := . }}
	{{ range .Site.Menus.sidebar }}
		{{ if .HasChildren }}
			<p class="pb-2 pt-4 font-title text-sm uppercase text-gray-500">
				{{ .Pre }}
				{{ .Name }}
			</p>
			<ul>
				{{ range .Children }}
					<li>
						<a
							href="{{ .URL }}"
							class="{{ if $currentNode.IsMenuCurrent "sidebar" . }}
								!bg-primary text-white
							{{ end }} block rounded-sm px-2 py-1.5 hover:bg-gray-200"
						>
							{{ .Pre }}
							{{ .Name }}
						</a>
					</li>
				{{ end }}
			</ul>
		{{ end }}
	{{ end }}
</aside>
