Foldable lesson list menu

Author: twitwi

src/components/Header.astro

@@ -1,5 +1,6 @@
 ---
 import { SITE_TITLE } from '../consts';
+import HeaderLessonsFolder from './HeaderLessonsFolder.astro';
 import HeaderLink from './HeaderLink.astro';
 ---
 
@@ -8,7 +9,7 @@ import HeaderLink from './HeaderLink.astro';
 		<h2><a href="/">{SITE_TITLE}</a></h2>
 		<div class="internal-links">
 			<HeaderLink href="/">Home</HeaderLink>
-			<HeaderLink href="/lessons">Lessons</HeaderLink>
+			<HeaderLessonsFolder title="Lessons" />
 			<HeaderLink href="/project">Project</HeaderLink>
 		</div>
 		<div class="social-links">
@@ -65,13 +66,13 @@ import HeaderLink from './HeaderLink.astro';
 		align-items: center;
 		justify-content: space-between;
 	}
-	nav a {
+	nav :is(a,.nav-link-folder) {
 		padding: 1em 0.5em;
 		color: var(--black);
 		border-bottom: 4px solid transparent;
 		text-decoration: none;
 	}
-	nav a.active {
+	nav :is(a,.nav-link-folder).active {
 		text-decoration: none;
 		border-bottom-color: var(--accent);
 	}

src/components/HeaderLessonsFolder.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import HeaderLink from './HeaderLink.astro';
+import { getCollection } from 'astro:content';
+
+const { class: className, title, ...props } = Astro.props;
+
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
+const prefix = 'lessons';
+const isActive = pathname === prefix || pathname.startsWith(prefix + '/')
+const id = pathname.replace(/.*\//g, '')
+
+const lessons = (await getCollection('lessons')).filter(
+	(l) => !(l.data.tags ?? []).includes('draft')
+).sort(
+	(a, b) => (a.data.order ?? 1000) - (b.data.order ?? 1000),
+);
+
+---
+
+<input type="checkbox" id="lessons-folder-toggle" style="display: none" />
+<div class:list={['nav-link-folder', className, { active: isActive}]}  {...props}>
+	<label for="lessons-folder-toggle">{ title }</label>
+	{
+		lessons.map(entry => (
+			<HeaderLink href={`/${prefix}/${entry.id}`} class:list={['nav-link', { active: id === entry.id} ]} >{entry.data.menu ?? entry.data.title}</HeaderLink>
+		))
+	}
+</div>

src/styles/global.css

@@ -177,3 +177,45 @@ details {
   }
 }
 
+/* Menu that unfolds on click (no javascript, pure-css, checkbox-based hack) */
+.nav-link-folder {
+	&, label {
+		cursor: pointer;
+	}
+	&.active label {
+		font-weight: bold;
+	}
+	display: inline-flex;
+	flex-direction: column;
+	align-items: left;
+
+	input:not(:checked) + & {
+		label::before {
+			content: "▸";
+			margin-right: 0.2em;
+		}
+		.nav-link {
+			display: none;
+		}
+	}
+	input:checked + & {
+		label::before {
+			content: "▾";
+			margin-right: 0.2em;
+		}
+		.nav-link {
+			opacity: 1;
+			margin: 0 -20vw 0 0.15em;
+			background-color: white;
+			z-index: 10;
+			text-decoration: none;
+			color: rgb(var(--black));
+
+			padding-left: .6em;
+			border-left: 4px solid rgba(var(--black), 15%);
+			&.active {
+				border-left-color: var(--accent);
+			}
+		}
+	}
+}