From f4d4ba8a9d789949eb81dadb933b4eb721a8e5fb Mon Sep 17 00:00:00 2001
From: a <a@trwnh.com>
Date: Sun, 11 Dec 2022 19:46:24 -0600
Subject: [PATCH] style collapsible menus properly

---
 assets/styles/components/nav-docs.scss | 18 ++++++++++++------
 layouts/partials/nav-docs.html         | 14 ++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/assets/styles/components/nav-docs.scss b/assets/styles/components/nav-docs.scss
index 3a274f6..2268467 100644
--- a/assets/styles/components/nav-docs.scss
+++ b/assets/styles/components/nav-docs.scss
@@ -21,12 +21,18 @@
 	padding: 1em 0;
 	.menu {
 		margin-top: 1em;
-		> li, > details {
+		> li, > details summary {
 			margin-bottom: 1em;
-			> a {
-				display: block;
-				margin-bottom: 1rem;
-			}
+		}
+	}
+	details {
+		margin-bottom: 1em;
+	}
+	summary {
+		font-weight: 700;
+		cursor: pointer;
+		&::marker {
+			content: '';
 		}
 	}
 	.sub-menu {
@@ -47,7 +53,7 @@
 			content: '↳ ';
 		}
 	}
-	.section-title > a {
+	.active > a {
 		font-weight: 700;
 		text-decoration: none;
 		color: inherit;
diff --git a/layouts/partials/nav-docs.html b/layouts/partials/nav-docs.html
index 4649903..1f2dae8 100644
--- a/layouts/partials/nav-docs.html
+++ b/layouts/partials/nav-docs.html
@@ -7,9 +7,9 @@
 			</svg> Documentation Menu</label>
 		<ul class="menu">
 			<a id="menu" href="#top">Skip menu</a>
-			{{ $currentPage := . }}
+			{{ $currentPage := .Page }}
 			{{ range .Site.Menus.docs }}
-				{{ $active := or ($currentPage.IsMenuCurrent "docs" .) (eq $currentPage.Section .Identifier)}}
+				{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
 				<details {{- if $active }} open{{ end -}}>
 					{{ if .HasChildren }}
 					<summary class='section-title{{- if $active }} active{{ end -}}'>
@@ -19,14 +19,16 @@
 					</summary>
 					<ul class="sub-menu" data-depth=1>
 					{{ range .Children }}
+					{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
 						{{ if .HasChildren}}
-							<li class='{{- if $active }} active{{ end -}}'>
+							<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 }}
-								<li class='{{- if $active }} active{{ end -}}'>
+							{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
+								<li class='{{- if $active }}active{{ end -}}'>
 								<a href="{{ .URL | relLangURL }}">
 								{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
 								</a>
@@ -34,7 +36,7 @@
 							{{ end }}{{/* range .Children (subsubmenu) */}}
 							</ul>
 						{{ else }}{{/* not .HasChildren (subsubmenu) */}}
-							<li class='{{- if $active }} active{{ end -}}'>
+							<li class='{{- if $active }}active{{ end -}}'>
 							<a href="{{ .URL | relLangURL }}">
 							{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
 							</a>
@@ -43,7 +45,7 @@
 					{{ end }}
 			</ul>
 			{{ else }}
-			<li class='{{- if $active }} active{{ end -}}'>
+			<li class='{{- if $active }}active{{ end -}}'>
 				<a href="{{ .URL | relLangURL }}">
 					{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
 				</a>