fix: highlight active toolkit in sidebar (#895)

teallarson · claude · web-flow · commit 298b4b8b3ba1 · 2026-03-31T13:53:04.000-04:00
* fix: highlight active toolkit in sidebar

Nextra's sidebar active-state detection only checks `item.route`, never
`item.href`. Toolkit entries in the generated `_meta.tsx` files must use
`href` (Nextra throws a validation error for keys with no matching page
on disk), but that means `item.route` is never set and the sidebar never
highlights the current toolkit.

Post-process the page map after `getPageMap()` to copy `href` → `route`
for any item that has `href` but no `route`, so Nextra's native active
detection works without changing the generated files.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;

* fix: recurse into children when copying href to route

An item with both `href` (no `route`) and `children` would get its
`route` set but its `children` would not be recursed into, silently
skipping any nested items that also need patching. Apply the two
operations independently so both always happen.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -24,6 +24,26 @@ import {
 
 const REGEX_LOCALE = /^\/([a-z]{2}(?:-[A-Z]{2})?)(?:\/|$)/;
 
+/**
+ * Nextra's active-state detection only checks `item.route`, never `item.href`.
+ * Toolkit sidebar entries use `href` (required so Nextra doesn't fail validation
+ * for keys with no matching page on disk), but get no `route`. Copy `href` →
+ * `route` so the sidebar highlights correctly when you're on a toolkit page.
+ */
+function addRoutesToHrefItems(items: object[]): object[] {
+  return items.map((item) => {
+    const i = item as Record<string, unknown>;
+    const withRoute = i.href && !i.route ? { ...i, route: i.href } : i;
+    if (Array.isArray(withRoute.children)) {
+      return {
+        ...withRoute,
+        children: addRoutesToHrefItems(withRoute.children as object[]),
+      };
+    }
+    return withRoute;
+  });
+}
+
 export function generateMetadata() {
   return {
     title: {
@@ -88,7 +108,8 @@ export default async function RootLayout({
   const lang = getLocaleFromPathname(pathname);
 
   const dictionary = await getDictionary(lang);
-  const pageMap = await getPageMap(`/${lang}`);
+  const rawPageMap = await getPageMap(`/${lang}`);
+  const pageMap = addRoutesToHrefItems(rawPageMap) as typeof rawPageMap;
 
   return (
     <html dir="ltr" lang={lang} suppressHydrationWarning>
