Add scroll target styles to sidebar nav

Author: stormwarning

docs/src/assets/main.css

@@ -94,4 +94,19 @@
 		margin: 0 -0.1875rem;
 		background-color: color-mix(in srgb, currentColor, transparent 70%);
 	}
+
+	.sidebar-nav {
+		scroll-target-group: auto;
+
+		a:target-current {
+			font-weight: 600;
+			color: theme("colors.gray.900");
+			border-color: theme("colors.gray.900");
+
+			@media (prefers-color-scheme: dark) {
+				color: theme("colors.white");
+				border-color: theme("colors.white");
+			}
+		}
+	}
 }

docs/src/layouts/page.njk

@@ -24,14 +24,14 @@ layout: base
 		<div
 			className="sticky top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden px-6 pt-10 pb-24"
 		>
-			<div class="flex flex-col gap-3">
+			<nav class="sidebar-nav flex flex-col gap-3">
 				<h5
 					class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400"
 				>
 					On this page
 				</h5>
 				{{ content | toc | safe }}
-			</div>
+			</nav>
 		</div>
 	</div>
 </div>