From b97df50d00e1a0951dad15b2bd2c05d6ea70c6fd Mon Sep 17 00:00:00 2001
From: Abhishek Choudhary <shreemaan.abhishek@gmail.com>
Date: Mon, 24 Aug 2026 16:39:30 +0545
Subject: [PATCH] fix(docs): restore collapsible sidebar categories

---
 next/src/components/SidebarNodes.astro | 19 +++++++++++++------
 next/src/styles/global.css             | 20 +++++++++++++++++++-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/next/src/components/SidebarNodes.astro b/next/src/components/SidebarNodes.astro
index 3ac471d0490dd..230d74616fe61 100644
--- a/next/src/components/SidebarNodes.astro
+++ b/next/src/components/SidebarNodes.astro
@@ -17,15 +17,22 @@ const { nodes, active, titleById, urlById } = Astro.props;
 /** Keep anything that links somewhere or that still has renderable children. */
 const renderable = (n: SidebarNode): boolean =>
   Boolean(n.id) || (Array.isArray(n.items) && n.items.some(renderable));
+
+const hasChildren = (n: SidebarNode): boolean =>
+  Array.isArray(n.items) && n.items.some(renderable);
 ---
 <ul>
   {nodes.filter(renderable).map((node) => (
-    <li class={node.items ? 'cat' : ''}>
-      {node.id
-        ? <a href={urlById(node.id)} class={node.id === active ? 'active' : ''}>{titleById?.get(node.id) ?? node.id}</a>
-        : <span>{node.label}</span>}
-      {node.items && node.items.some(renderable) && (
-        <Astro.self nodes={node.items} active={active} titleById={titleById} urlById={urlById} />
+    <li class={hasChildren(node) ? 'cat' : ''}>
+      {hasChildren(node) ? (
+        <details class="sidebar-category">
+          <summary>{node.label ?? titleById?.get(node.id ?? '') ?? node.id}</summary>
+          <Astro.self nodes={node.items!} active={active} titleById={titleById} urlById={urlById} />
+        </details>
+      ) : node.id ? (
+        <a href={urlById(node.id)} class={node.id === active ? 'active' : ''}>{titleById?.get(node.id) ?? node.id}</a>
+      ) : (
+        <span>{node.label}</span>
       )}
     </li>
   ))}
diff --git a/next/src/styles/global.css b/next/src/styles/global.css
index 320b015d8c6c1..1346c96a0c823 100644
--- a/next/src/styles/global.css
+++ b/next/src/styles/global.css
@@ -334,7 +334,25 @@ a.tag:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2
 .docs-sidebar a { display: block; color: var(--color-text-soft); padding: .22rem .5rem; border-radius: 6px; }
 .docs-sidebar a:hover { color: var(--color-primary); background: var(--color-surface-alt); text-decoration: none; }
 .docs-sidebar a.active { color: var(--color-primary); font-weight: 600; background: #fdeeee; }
-.docs-sidebar .cat > span { display: block; font-weight: 700; color: var(--color-text); padding: .5rem .5rem .2rem; }
+.docs-sidebar .sidebar-category > summary {
+  display: flex;
+  align-items: center;
+  gap: .35rem;
+  padding: .5rem .5rem .2rem;
+  color: var(--color-text);
+  font-weight: 700;
+  cursor: pointer;
+  list-style: none;
+}
+.docs-sidebar .sidebar-category > summary::-webkit-details-marker { display: none; }
+.docs-sidebar .sidebar-category > summary::before {
+  content: '▸';
+  color: var(--color-text-soft);
+  font-size: .8em;
+  transition: transform var(--dur) var(--ease);
+}
+.docs-sidebar .sidebar-category[open] > summary::before { transform: rotate(90deg); }
+.docs-sidebar .sidebar-category > summary:hover { color: var(--color-primary); }
 .docs-content { min-width: 0; padding-bottom: 3rem; }
 .docs-meta { border-top: 1px solid var(--color-border); margin-top: 2.5rem; padding-top: 1rem; font-size: .85rem; color: var(--color-text-soft); display: flex; gap: 1rem; flex-wrap: wrap; }
 @media (max-width: 960px) {