This is an automated email from the ASF dual-hosted git repository.
guoqqqi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 45c96fe5b9f fix(docs): restore collapsible sidebar categories (#2108)
45c96fe5b9f is described below
commit 45c96fe5b9f55880d094212634ea1630fc341904
Author: Shreemaan Abhishek <[email protected]>
AuthorDate: Wed Aug 26 15:30:02 2026 +0800
fix(docs): restore collapsible sidebar categories (#2108)
---
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 3ac471d0490..230d74616fe 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 320b015d8c6..1346c96a0c8 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) {
