diff --git a/components/docs/DocsSidebar.tsx b/components/docs/DocsSidebar.tsx
index 97f2929..fcd0ab2 100644
--- a/components/docs/DocsSidebar.tsx
+++ b/components/docs/DocsSidebar.tsx
@@ -1,18 +1,17 @@
'use client'
import Link from 'next/link'
-import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
-import { ChevronDown } from 'lucide-react'
-import type { NavSection, ProductNav } from '@/lib/content'
+import type { ProductNav } from '@/lib/content'
+import { NavSection } from './NavSection'
/**
- * Frontmatter-derived nav with the product switch on top: auths-mcp and
- * Identity & signing are separate worlds that never intermix. The switch
- * navigates to each product's landing page; the shown product follows the URL.
+ * Frontmatter-derived nav with the area switch on top. Areas are separate
+ * worlds that never intermix; the switch navigates to each area's landing page
+ * and the shown area follows the URL.
*
- * Sections come in two shapes: flat (always open) and collapsible — one row
- * with a chevron for large topics, auto-expanded while the reader is inside.
+ * Every section renders through the one shared {@link NavSection} disclosure —
+ * same caret, same behaviour, in every area.
*/
function productForPath(nav: ProductNav[], pathname: string): ProductNav['product'] {
@@ -22,7 +21,7 @@ function productForPath(nav: ProductNav[], pathname: string): ProductNav['produc
return 'mcp'
}
-/** A product's first navigable page — where its switch tab points. */
+/** An area's first navigable page — where its switch tab points. */
function landingHref(p: ProductNav): string {
for (const section of p.sections) {
const first = section.items.find((i) => i.badge !== 'soon')
@@ -31,83 +30,14 @@ function landingHref(p: ProductNav): string {
return '#'
}
-function SectionItems({ section, pathname }: { section: NavSection; pathname: string }) {
- return (
-