From e483202512d42b6be12c682feead4aeb34a3c86e Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Fri, 25 Sep 2026 22:59:19 +0800 Subject: [PATCH 1/6] docs: Make the active sidebar item stand out The current page was marked only by a heavier weight on text that is already the foreground colour, so it was hard to find again after scrolling a long article. Give it the sidebar accent fill and a brand bar on its leading edge, and mark it with `aria-current="page"`. Section root links (`/docs`, `/component`, `/shell`) prefix every page in their section, so they were marked active alongside the real page. Only the longest matching link is active now. Closes #3190 Co-Authored-By: Claude Opus 5.5 (1M context) --- website/src/components/Sidebar.astro | 21 ++++++++++++++++++++- website/src/styles/global.css | 21 ++++++++++++++++++++- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/website/src/components/Sidebar.astro b/website/src/components/Sidebar.astro index 9920dec524..6b49e76ae4 100644 --- a/website/src/components/Sidebar.astro +++ b/website/src/components/Sidebar.astro @@ -9,10 +9,27 @@ export interface Props { const { items, currentPath, lang = 'en' } = Astro.props; -function isActive(link: string): boolean { +function matches(link: string): boolean { return currentPath === link || currentPath.startsWith(link + '/'); } +function links(items: SidebarItem[]): string[] { + return items.flatMap(item => [ + ...(item.link ? [item.link] : []), + ...(item.items ? links(item.items) : []), + ]); +} + +// A section root such as `/docs` prefixes every page under it, so only the +// longest matching link is current; otherwise two items light up at once. +const activeLink = links(items) + .filter(matches) + .sort((a, b) => b.length - a.length)[0]; + +function isActive(link: string): boolean { + return link === activeLink; +} + ---