From efb1d7220864c5e6cdc0451c33500ac637eecdf2 Mon Sep 17 00:00:00 2001 From: David Pine Date: Wed, 13 May 2026 20:45:32 -0500 Subject: [PATCH 1/7] Restructure sidebar layout: always-visible topics, full-width filter, anchored toggle Layout changes - Replace the topic dropdown with an always-visible topics list at the top of the sidebar. - Move the filter input directly below the topics list and stretch it to full width. - Remove sticky positioning from the topics + filter wrappers so the whole sidebar scrolls as one unit. Collapse/expand toggle - Anchor the floating collapse/expand toggle to the sidebar's right edge as a projecting tab (no margin gap, flat left edge, rounded right corners). - Make the toggle banner-aware via a JS-measured --aspire-banner-height CSS variable on , kept in sync via MutationObserver + ResizeObserver + window resize. - Fully collapse the sidebar (--sl-sidebar-width: 0rem) when the toggle is engaged so no leftover strip remains; the floating toggle stays visible because it lives outside the pane in the DOM. Visual polish - Align topic icon left edges with the filter icon position so they read as a single column. - Tune topic link padding/line-height for a denser, but still comfortable, vertical rhythm. - Size the toggle at 2.5rem with 0.55rem internal padding. Stability - Give the sidebar its own view-transition-name and disable its cross-fade animation to eliminate the white-border flash that briefly appeared on dark theme during topic navigation. - Drop the border-color transition from topic links for the same reason. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../src/components/starlight/Sidebar.astro | 802 +++++++++--------- src/frontend/src/styles/site.css | 41 +- 2 files changed, 412 insertions(+), 431 deletions(-) diff --git a/src/frontend/src/components/starlight/Sidebar.astro b/src/frontend/src/components/starlight/Sidebar.astro index d45e63f7e..083f03d96 100644 --- a/src/frontend/src/components/starlight/Sidebar.astro +++ b/src/frontend/src/components/starlight/Sidebar.astro @@ -115,7 +115,7 @@ const currentTopic = effectiveTopics.find((topic) => topic.isCurrent) ?? effecti const hasTopicSidebar = Boolean( !isApiRefPage && routeData?.hasSidebar && topicState?.isPageWithTopic && currentTopic ); -const hasSharedTopicDropdown = Boolean(currentTopic && effectiveTopics.length > 0); +const hasTopicsList = Boolean(currentTopic && effectiveTopics.length > 0); ---
isApiRefPage ? ( <>
-
-
-
- - - - -
- - -
- {hasSharedTopicDropdown && ( -
+ + -
- )} +