From 50d458c1d1a9d4b6bfb032e373aaa3111f70b960 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 15 Jan 2026 15:54:43 +0100
Subject: [PATCH] feat: add Reference link to main navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Reference nav link with subtle separator styling
- Update nav highlight to show active state on reference pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 src/app.js     | 2 ++
 src/index.html | 1 +
 src/main.css   | 6 ++++++
 3 files changed, 9 insertions(+)

diff --git a/src/app.js b/src/app.js
index ed7ce1c..6c3e406 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1941,6 +1941,8 @@ function updateNavHighlight(route) {
 
 		if (route?.type === RouteType.SECTION && link.dataset.section === route.sectionId) {
 			link.classList.add("active");
+		} else if (route?.type === RouteType.REFERENCE && link.dataset.section === "reference") {
+			link.classList.add("active");
 		} else if (route?.type === RouteType.LESSON) {
 			// Highlight section based on module's inferred section
 			const module = lessonEngine.modules.find((m) => m.id === route.moduleId);
diff --git a/src/index.html b/src/index.html
index dd61d87..fb45221 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,6 +31,7 @@
 						<a href="#css" class="nav-link" data-section="css">CSS</a>
 						<a href="#html" class="nav-link" data-section="html">HTML</a>
 						<a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a>
+						<a href="#reference/css" class="nav-link nav-link-ref" data-section="reference">Reference</a>
 					</nav>
 					<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
 				</div>
diff --git a/src/main.css b/src/main.css
index 5d9d840..fee3aa5 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1521,6 +1521,12 @@ input:checked + .toggle-slider::before {
 	color: var(--primary-color);
 }
 
+.nav-link-ref {
+	margin-left: 0.5rem;
+	padding-left: 1rem;
+	border-left: 1px solid var(--border-color);
+}
+
 @media (min-width: 769px) {
 	.main-nav {
 		display: flex;