From 6c46b5db93d4400cf49f0d66cf18898eef13ab49 Mon Sep 17 00:00:00 2001 From: mohamedh Date: Wed, 18 Mar 2026 12:08:36 +0000 Subject: [PATCH 01/12] style: improve sidebar item layout, focus style, and spacing --- astro.config.ts | 6 + src/components/overrides/Sidebar.astro | 167 ++++++++---------- src/components/overrides/SidebarSublist.astro | 125 +++++++++++++ src/styles/sidebar.css | 112 ++++-------- 4 files changed, 242 insertions(+), 168 deletions(-) create mode 100644 src/components/overrides/SidebarSublist.astro diff --git a/astro.config.ts b/astro.config.ts index 95891e52397..015bfc8681b 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -215,6 +215,12 @@ export default defineConfig({ "../components/Page.astro": fileURLToPath( new URL("./src/components/overrides/Page.astro", import.meta.url), ), + "./SidebarSublist.astro": fileURLToPath( + new URL( + "./src/components/overrides/SidebarSublist.astro", + import.meta.url, + ), + ), }, }, }, diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro index e532586f7d3..b605e6c8d3b 100644 --- a/src/components/overrides/Sidebar.astro +++ b/src/components/overrides/Sidebar.astro @@ -7,7 +7,9 @@ import { lookupProductTitle } from "~/util/sidebar"; const [product, module] = Astro.url.pathname.split("/").filter(Boolean); --- -
+
@@ -22,10 +24,13 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
@@ -309,6 +314,71 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean); } else { initSidebarSearch(); } + + // ── Smooth details expand/collapse ── + // Only animates opacity + transform (GPU-composited, 60fps) + const DURATION = 200; + const EASE_OUT = "cubic-bezier(0.16, 1, 0.3, 1)"; + const prefersReducedMotion = window.matchMedia( + "(prefers-reduced-motion: reduce)", + ).matches; + + function initDetailsAnimation() { + const sidebarContent = document.querySelector(".sidebar-content"); + if (!sidebarContent) return; + + const detailsElements = sidebarContent.querySelectorAll("details"); + + detailsElements.forEach((details) => { + const summary = details.querySelector("summary"); + if (!summary) return; + + let animating = false; + + summary.addEventListener("click", (e) => { + e.preventDefault(); + if (animating) return; + + const content = details.querySelector("ul"); + if (!content) return; + + // Defer the DOM change so Starlight's SidebarPersistState click + // handler (which reads !details.open) sees the pre-toggle value. + setTimeout(() => { + if (prefersReducedMotion) { + details.open = !details.open; + return; + } + + if (details.open) { + // ── Closing — snap shut ── + details.open = false; + } else { + // ── Opening ── + details.open = true; + animating = true; + const anim = content.animate( + [ + { opacity: 0, transform: "translateY(-4px)" }, + { opacity: 1, transform: "translateY(0)" }, + ], + { duration: DURATION, easing: EASE_OUT, fill: "forwards" }, + ); + anim.onfinish = () => { + content.getAnimations().forEach((a) => a.cancel()); + animating = false; + }; + } + }, 0); + }); + }); + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", initDetailsAnimation); + } else { + initDetailsAnimation(); + } diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro new file mode 100644 index 00000000000..a3825bbe02d --- /dev/null +++ b/src/components/overrides/SidebarSublist.astro @@ -0,0 +1,125 @@ +--- +import { Icon, Badge } from "@astrojs/starlight/components"; +import SidebarIcon from "~/components/SidebarIcon.astro"; + +interface Props { + sublist: any[]; + nested?: boolean; +} + +const { sublist, nested } = Astro.props; + +/** Flatten a sidebar tree into a flat list of link entries. */ +function flattenSidebar(entries: any[]): any[] { + return entries.flatMap((entry: any) => + entry.type === "group" ? flattenSidebar(entry.entries) : entry, + ); +} + +/** + * SidebarRestorePoint counter — inlined from Starlight's internal component. + * Each
needs a unique, incrementing index for the sidebar persister. + */ +const currentGroupIndexSymbol = Symbol.for("starlight-sidebar-group-index"); +const locals = Astro.locals as typeof Astro.locals & { + [currentGroupIndexSymbol]: number; +}; + +function nextRestoreIndex(): number { + const index = locals[currentGroupIndexSymbol] || 0; + locals[currentGroupIndexSymbol] = index + 1; + return index; +} + +// Pre-compute restore indices for each group entry in this sublist +const restoreIndices = sublist.map((entry) => + entry.type === "group" ? nextRestoreIndex() : -1, +); +--- + + + + + + diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css index 78e1ccca069..89b56e6f0df 100644 --- a/src/styles/sidebar.css +++ b/src/styles/sidebar.css @@ -1,92 +1,48 @@ +:root { + --sl-sidebar-width: 272px; +} + .sidebar-pane { scrollbar-gutter: stable; } .sidebar-content { - gap: 0; - padding: 0 1.5rem 1rem; + gap: 2px; + padding: 0 0.75rem 1rem; +} - .large { - font-weight: unset; - font-size: unset; - color: unset; - } +/* Content animated via JS — these are the targets */ +.sidebar-content details > ul { + overflow: hidden; + will-change: transform, opacity; +} - [aria-current="page"] { - background-color: transparent !important; - font-weight: 500 !important; - color: var(--sl-color-sidebar-active) !important; +/* Respect reduced motion */ +@media (prefers-reduced-motion: reduce) { + .sidebar-content details > ul { + will-change: auto; } +} - .top-level > li { - & + li { - margin-top: 0.5rem; - } - - & > a, - & > details > summary { - font-size: 1rem; - font-weight: normal; - - background-color: transparent; - color: var(--sl-color-white); - - padding: 0.25rem 0.5rem; - - &:hover { - background-color: var(--sl-color-sidebar-hover); - border-radius: 0.25rem; - } - } - - & > details > ul { - --sl-sidebar-item-padding-inline: 0.5rem; - } - - ul { - --sl-sidebar-item-padding-inline: 0.75rem; - - margin-inline-start: var(--sl-sidebar-item-padding-inline); - border-inline-start: 1px solid var(--sl-color-hairline-light); - - margin-top: 0.5rem; - - li { - margin-inline-start: unset; - border-inline-start: unset; - padding-inline-start: unset; - - & + li { - margin-top: 0.375rem; - } - } - - a, - summary { - --sl-sidebar-item-padding-inline: 0.75rem; - - padding-top: 0.25rem; - padding-bottom: 0.25rem; - - font-size: 0.875rem; - color: var(--sl-color-text); - - &:hover { - background-color: var(--sl-color-sidebar-hover); - border-radius: 0; - } - } - } - } +/* ── Light theme ── */ +:root[data-theme="light"] { + --sidebar-text: #525252; /* neutral-600 */ + --sidebar-text-strong: #0a0a0a; /* neutral-950 */ + --sidebar-hover-bg: #f2f2f2; /* neutral-150 */ + --sidebar-active-bg: #f2f2f2; /* neutral-150 */ + --sidebar-border: #e5e5e5; /* neutral-200 */ + --sl-color-sidebar-active: #0a0a0a; /* neutral-950 */ + --sl-color-sidebar-hover: #f2f2f2; /* neutral-150 */ } +/* ── Dark theme ── */ :root[data-theme="dark"] { --sl-color-bg-sidebar: var(--color-cl1-gray-0); - --sl-color-sidebar-active: var(--color-cl1-blue-7); - --sl-color-sidebar-hover: var(--color-cl1-gray-2); -} - -:root[data-theme="light"] { - --sl-color-sidebar-active: var(--color-cl1-blue-4); - --sl-color-sidebar-hover: var(--color-cl1-gray-9); + --sidebar-text: #a3a3a3; /* neutral-400 */ + --sidebar-text-strong: #ffffff; /* white */ + --sidebar-hover-bg: #171717; /* neutral-900 */ + --sidebar-active-bg: #171717; /* neutral-900 */ + --sidebar-border: #404040; /* neutral-700 */ + --sl-color-sidebar-active: #ffffff; /* white */ + --sl-color-sidebar-hover: #171717; /* neutral-900 */ } From b62b957c15fc85efdd1bc079bc00a1ececcf875f Mon Sep 17 00:00:00 2001 From: mohamedh Date: Wed, 18 Mar 2026 12:18:38 +0000 Subject: [PATCH 02/12] fix: change icon path --- src/components/overrides/SidebarSublist.astro | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index a3825bbe02d..8da885c980b 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -1,6 +1,6 @@ --- import { Icon, Badge } from "@astrojs/starlight/components"; -import SidebarIcon from "~/components/SidebarIcon.astro"; +import SidebarIcon from "../SidebarIcon.astro"; interface Props { sublist: any[]; @@ -87,11 +87,11 @@ const restoreIndices = sublist.map((entry) => {entry.badge && ( - )} - + class={`ml-[0.5em] ${entry.badge.class ?? ""}`} + text={entry.badge.text} + /> + )} + Date: Wed, 18 Mar 2026 12:24:43 +0000 Subject: [PATCH 03/12] fix: revert icon path --- src/components/overrides/SidebarSublist.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index 8da885c980b..c6df62be9e9 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -1,6 +1,6 @@ --- import { Icon, Badge } from "@astrojs/starlight/components"; -import SidebarIcon from "../SidebarIcon.astro"; +import SidebarIcon from "~/components/SidebarIcon.astro"; interface Props { sublist: any[]; From 706d94c70043746fac3acddede772e5d6b1106d5 Mon Sep 17 00:00:00 2001 From: mohamedh Date: Wed, 18 Mar 2026 15:27:54 +0000 Subject: [PATCH 04/12] fix: fix build error --- src/components/overrides/SidebarSublist.astro | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index c6df62be9e9..71bca6ccabb 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -1,6 +1,5 @@ --- import { Icon, Badge } from "@astrojs/starlight/components"; -import SidebarIcon from "~/components/SidebarIcon.astro"; interface Props { sublist: any[]; @@ -63,7 +62,6 @@ const restoreIndices = sublist.map((entry) => {...entry.attrs} > - {entry.icon && } {entry.label} {entry.badge && ( From de9af2077cf3430376d5944cb9173b802171357f Mon Sep 17 00:00:00 2001 From: mohamedh Date: Wed, 18 Mar 2026 19:22:42 +0000 Subject: [PATCH 05/12] style: PR comment fixes --- src/components/overrides/Sidebar.astro | 94 ++++++------------- src/components/overrides/SidebarSublist.astro | 24 ++--- src/styles/sidebar.css | 39 +++++--- 3 files changed, 68 insertions(+), 89 deletions(-) diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro index b605e6c8d3b..058de6ad99c 100644 --- a/src/components/overrides/Sidebar.astro +++ b/src/components/overrides/Sidebar.astro @@ -74,6 +74,35 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean); ) return; + // Attach an event listener so that we ONLY animate details that are explicitly toggled + // by the user clicking them, preventing CSS animations from flickering on page load + sidebarContent.addEventListener("click", (e) => { + const target = e.target as HTMLElement; + const summary = target.closest("summary"); + if (!summary) return; + const details = summary.parentElement; + if (details && details.tagName === "DETAILS") { + details.classList.add("is-user-toggled"); + } + }); + + // Remove the animation class once it completes to prevent the animation from + // re-running when Astro View Transitions detaches and reattaches the sidebar DOM + sidebarContent.addEventListener("animationend", (e) => { + const target = e.target as HTMLElement; + if (e.animationName === "sidebar-details-open") { + const details = target.closest("details"); + if (details) details.classList.remove("is-user-toggled"); + } + }); + + // Failsafe: strip the class before any page transition DOM swap + document.addEventListener("astro:before-swap", () => { + document.querySelectorAll(".sidebar-content details.is-user-toggled").forEach(d => { + d.classList.remove("is-user-toggled"); + }); + }); + const originalState: Map = new Map(); // Store original state of details elements @@ -314,71 +343,6 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean); } else { initSidebarSearch(); } - - // ── Smooth details expand/collapse ── - // Only animates opacity + transform (GPU-composited, 60fps) - const DURATION = 200; - const EASE_OUT = "cubic-bezier(0.16, 1, 0.3, 1)"; - const prefersReducedMotion = window.matchMedia( - "(prefers-reduced-motion: reduce)", - ).matches; - - function initDetailsAnimation() { - const sidebarContent = document.querySelector(".sidebar-content"); - if (!sidebarContent) return; - - const detailsElements = sidebarContent.querySelectorAll("details"); - - detailsElements.forEach((details) => { - const summary = details.querySelector("summary"); - if (!summary) return; - - let animating = false; - - summary.addEventListener("click", (e) => { - e.preventDefault(); - if (animating) return; - - const content = details.querySelector("ul"); - if (!content) return; - - // Defer the DOM change so Starlight's SidebarPersistState click - // handler (which reads !details.open) sees the pre-toggle value. - setTimeout(() => { - if (prefersReducedMotion) { - details.open = !details.open; - return; - } - - if (details.open) { - // ── Closing — snap shut ── - details.open = false; - } else { - // ── Opening ── - details.open = true; - animating = true; - const anim = content.animate( - [ - { opacity: 0, transform: "translateY(-4px)" }, - { opacity: 1, transform: "translateY(0)" }, - ], - { duration: DURATION, easing: EASE_OUT, fill: "forwards" }, - ); - anim.onfinish = () => { - content.getAnimations().forEach((a) => a.cancel()); - animating = false; - }; - } - }, 0); - }); - }); - } - - if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", initDetailsAnimation); - } else { - initDetailsAnimation(); - } diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css index cc4378fd036..b15a0946ac6 100644 --- a/src/styles/sidebar.css +++ b/src/styles/sidebar.css @@ -7,57 +7,61 @@ padding: 0 0.75rem 1rem; } -/* Content animated via CSS — these are the targets */ -.sidebar-content details > ul { +/* ── Accordion height transition using CSS grid ── */ +.sidebar-accordion { + display: grid; + grid-template-rows: 1fr; + transition: grid-template-rows 250ms cubic-bezier(0.87, 0, 0.13, 1); +} + +.sidebar-accordion-inner { overflow: hidden; + min-height: 0; } -.sidebar-content details.is-user-toggled[open] > ul { - animation: sidebar-details-open 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards; +/* Collapsed: when details is closed, grid row = 0fr */ +.sidebar-content details:not([open]) > .sidebar-accordion { + grid-template-rows: 0fr; } -@keyframes sidebar-details-open { - from { - opacity: 0; - transform: translateY(-4px); - } - to { - opacity: 1; - transform: translateY(0); - } +/* Only animate on user-initiated toggles, not page load */ +.sidebar-content details:not(.is-user-toggled) > .sidebar-accordion { + transition: none; } -/* Respect reduced motion */ +/* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { - .sidebar-content details > ul, - .sidebar-content details.is-user-toggled[open] > ul { - animation: none !important; + .sidebar-accordion { + transition: none !important; } } /* ── Light theme ── */ :root[data-theme="light"] { - --sidebar-text: #525252; /* neutral-600 */ - --sidebar-text-strong: #0a0a0a; /* neutral-950 */ - --sidebar-hover-bg: #f2f2f2; /* neutral-150 */ + --sl-color-bg-nav: var(--color-cl1-white); + --sidebar-text: var(--color-cl1-gray-4); + --sidebar-text-strong: var(--color-cl1-black); + --sidebar-hover-bg: var(--color-cl1-gray-9); --sidebar-hover-text: var(--sidebar-text-strong); - --sidebar-active-bg: #f2f2f2; /* neutral-150 */ + --sidebar-active-bg: var(--color-cl1-gray-9); --sidebar-active-text: var(--sidebar-text-strong); - --sidebar-border: #e5e5e5; /* neutral-200 */ - --sl-color-sidebar-active: #0a0a0a; /* neutral-950 */ - --sl-color-sidebar-hover: #f2f2f2; /* neutral-150 */ + --sidebar-border: var(--color-cl1-gray-8); + --sl-color-sidebar-active: var(--color-cl1-black); + --sl-color-sidebar-hover: var(--color-cl1-gray-9); } /* ── Dark theme ── */ :root[data-theme="dark"] { - --sl-color-bg-sidebar: var(--color-cl1-gray-0); - --sidebar-text: #a3a3a3; /* neutral-400 */ - --sidebar-text-strong: #ffffff; /* white */ + --sl-color-bg-nav: var(--sl-color-bg); + --sl-color-bg-sidebar: var(--sl-color-bg); + --sl-color-hairline-shade: var(--color-cl1-gray-2); + --sidebar-text: var(--color-cl1-gray-7); + --sidebar-text-strong: var(--color-cl1-white); --sidebar-hover-bg: var(--sidebar-orange-accent-600); --sidebar-hover-text: var(--orange-accent-200); --sidebar-active-bg: var(--sidebar-orange-accent-600); --sidebar-active-text: var(--orange-accent-200); - --sidebar-border: #404040; /* neutral-700 */ + --sidebar-border: var(--color-cl1-gray-2); --sl-color-sidebar-active: var(--orange-accent-200); --sl-color-sidebar-hover: var(--sidebar-orange-accent-600); } From 0530278877874dc38bdf5cf89b95d238f40408f9 Mon Sep 17 00:00:00 2001 From: mohamedh Date: Thu, 19 Mar 2026 16:35:11 +0000 Subject: [PATCH 07/12] style: show active state in parents of nested items --- src/components/overrides/SidebarSublist.astro | 8 +++++++- src/util/sidebar.ts | 2 ++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index 447b5a4f0ef..ff8c8ab28a0 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -79,7 +79,13 @@ const restoreIndices = sublist.map((entry) => ) || !entry.collapsed } > - + {entry.label} {entry.badge && ( diff --git a/src/util/sidebar.ts b/src/util/sidebar.ts index 79d25ee7355..2761b5e919c 100644 --- a/src/util/sidebar.ts +++ b/src/util/sidebar.ts @@ -9,6 +9,7 @@ type Link = Extract & { }; type Group = Extract & { order?: number; + hasActivePage?: boolean; }; export type SidebarEntry = Link | Group; @@ -165,6 +166,7 @@ function setSidebarCurrentEntry( entry.type === "group" && setSidebarCurrentEntry(entry.entries, pathname) ) { + entry.hasActivePage = true; return true; } From 87dbaffb1478dbc13a51ce0ab2f52eccf9093608 Mon Sep 17 00:00:00 2001 From: mohamedh Date: Thu, 19 Mar 2026 16:47:19 +0000 Subject: [PATCH 08/12] fix: ci failure --- src/components/overrides/SidebarSublist.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index ff8c8ab28a0..97a6d9f2112 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -1,6 +1,6 @@ --- import { Icon, Badge } from "@astrojs/starlight/components"; -import { SidebarEntry } from "~/util/sidebar"; +import type { SidebarEntry } from "~/util/sidebar"; interface Props { sublist: SidebarEntry[]; @@ -75,7 +75,7 @@ const restoreIndices = sublist.map((entry) =>
i.isCurrent, + (i) => i.type === "link" && i.isCurrent, ) || !entry.collapsed } > From 3e674c3d79d13fa171a446e975082d7cd7de475f Mon Sep 17 00:00:00 2001 From: mohamedh Date: Thu, 19 Mar 2026 21:12:41 +0000 Subject: [PATCH 09/12] style: improve theming --- src/components/overrides/Sidebar.astro | 4 ++-- src/components/overrides/SidebarSublist.astro | 8 ++++---- src/styles/sidebar.css | 12 ++++++------ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro index a856e3f02d3..4b32f9a4536 100644 --- a/src/components/overrides/Sidebar.astro +++ b/src/components/overrides/Sidebar.astro @@ -26,11 +26,11 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index 97a6d9f2112..7495c508279 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -52,11 +52,11 @@ const restoreIndices = sublist.map((entry) => href={entry.href} aria-current={entry.isCurrent ? "page" : undefined} class:list={[ - "flex min-h-[2.125rem] items-start rounded-lg px-3 py-1.5 text-sm font-medium no-underline transition-colors duration-150", + "flex min-h-[2.125rem] items-start rounded-lg px-3 py-1.5 text-sm font-medium no-underline", "outline-2 outline-offset-[-2px] outline-transparent focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400", - "text-[var(--sidebar-text)] hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]", - entry.isCurrent && - "!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)]", + entry.isCurrent + ? "!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)]" + : "transition-colors duration-150 text-[var(--sidebar-text)] hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]", !nested && "large", entry.attrs.class, ]} diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css index b15a0946ac6..b6bf632123f 100644 --- a/src/styles/sidebar.css +++ b/src/styles/sidebar.css @@ -57,11 +57,11 @@ --sl-color-hairline-shade: var(--color-cl1-gray-2); --sidebar-text: var(--color-cl1-gray-7); --sidebar-text-strong: var(--color-cl1-white); - --sidebar-hover-bg: var(--sidebar-orange-accent-600); - --sidebar-hover-text: var(--orange-accent-200); - --sidebar-active-bg: var(--sidebar-orange-accent-600); - --sidebar-active-text: var(--orange-accent-200); + --sidebar-hover-bg: var(--color-cl1-gray-2); + --sidebar-hover-text: var(--sidebar-text-strong); + --sidebar-active-bg: var(--color-cl1-gray-2); + --sidebar-active-text: var(--sidebar-text-strong); --sidebar-border: var(--color-cl1-gray-2); - --sl-color-sidebar-active: var(--orange-accent-200); - --sl-color-sidebar-hover: var(--sidebar-orange-accent-600); + --sl-color-sidebar-active: var(--sidebar-text-strong); + --sl-color-sidebar-hover: var(--color-cl1-gray-2); } From ddd81c0fce542982b31451e861360de420404e02 Mon Sep 17 00:00:00 2001 From: mohamedh Date: Thu, 19 Mar 2026 22:39:36 +0000 Subject: [PATCH 10/12] fix: improve animation --- src/components/overrides/Sidebar.astro | 82 +++++++++++++------ src/components/overrides/SidebarSublist.astro | 5 +- src/styles/sidebar.css | 29 ------- 3 files changed, 58 insertions(+), 58 deletions(-) diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro index 4b32f9a4536..c69babc28de 100644 --- a/src/components/overrides/Sidebar.astro +++ b/src/components/overrides/Sidebar.astro @@ -74,39 +74,67 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean); ) return; - // Attach an event listener so that we ONLY animate details that are explicitly toggled - // by the user clicking them, preventing CSS animations from flickering on page load + // ── Animated
toggle ── + const animating = new WeakSet(); + const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)"); + const DURATION = 250; + const EASING = "cubic-bezier(0.87, 0, 0.13, 1)"; + + function animateAccordion( + details: HTMLDetailsElement, + from: string, + to: string, + onDone?: () => void, + ) { + const el = details.querySelector( + ":scope > .sidebar-accordion", + ); + if (!el || reducedMotion.matches) { + onDone?.(); + return; + } + if (animating.has(details)) el.getAnimations().forEach((a) => a.cancel()); + animating.add(details); + + const anim = el.animate( + [{ gridTemplateRows: from }, { gridTemplateRows: to }], + { + duration: DURATION, + easing: EASING, + fill: onDone ? "forwards" : "none", + }, + ); + const cleanup = () => animating.delete(details); + anim.oncancel = cleanup; + anim.onfinish = () => { + onDone?.(); + anim.cancel(); + cleanup(); + }; + } sidebarContent.addEventListener("click", (e) => { - const target = e.target as HTMLElement; - const summary = target.closest("summary"); + const summary = (e.target as HTMLElement).closest("summary"); if (!summary) return; - const details = summary.parentElement; - if (details && details.tagName === "DETAILS") { - details.classList.add("is-user-toggled"); + const details = summary.parentElement as HTMLDetailsElement | null; + if (!details || details.tagName !== "DETAILS") return; + + e.preventDefault(); + + if (details.open) { + animateAccordion(details, "1fr", "0fr", () => { + details.open = false; + }); + } else { + details.open = true; + animateAccordion(details, "0fr", "1fr"); } }); - (sidebarContent as HTMLElement).addEventListener( - "transitionend", - (e: TransitionEvent) => { - const target = e.target as HTMLElement; - if ( - target.classList.contains("sidebar-accordion") && - e.propertyName === "grid-template-rows" - ) { - const details = target.closest("details"); - if (details) details.classList.remove("is-user-toggled"); - } - }, - ); - - // Failsafe: strip the class before any page transition DOM swap + // Cancel in-flight animations before Astro page transitions. document.addEventListener("astro:before-swap", () => { - document - .querySelectorAll(".sidebar-content details.is-user-toggled") - .forEach((d) => { - d.classList.remove("is-user-toggled"); - }); + sidebarContent + ?.querySelectorAll(".sidebar-accordion") + .forEach((el) => el.getAnimations().forEach((a) => a.cancel())); }); const originalState: Map = new Map(); diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index 7495c508279..413d90b0345 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -73,6 +73,7 @@ const restoreIndices = sublist.map((entry) => ) : (
i.type === "link" && i.isCurrent, @@ -103,8 +104,8 @@ const restoreIndices = sublist.map((entry) => /> -
-
+
+
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css index b6bf632123f..6bcbe2d33c4 100644 --- a/src/styles/sidebar.css +++ b/src/styles/sidebar.css @@ -7,35 +7,6 @@ padding: 0 0.75rem 1rem; } -/* ── Accordion height transition using CSS grid ── */ -.sidebar-accordion { - display: grid; - grid-template-rows: 1fr; - transition: grid-template-rows 250ms cubic-bezier(0.87, 0, 0.13, 1); -} - -.sidebar-accordion-inner { - overflow: hidden; - min-height: 0; -} - -/* Collapsed: when details is closed, grid row = 0fr */ -.sidebar-content details:not([open]) > .sidebar-accordion { - grid-template-rows: 0fr; -} - -/* Only animate on user-initiated toggles, not page load */ -.sidebar-content details:not(.is-user-toggled) > .sidebar-accordion { - transition: none; -} - -/* Respect motion preferences */ -@media (prefers-reduced-motion: reduce) { - .sidebar-accordion { - transition: none !important; - } -} - /* ── Light theme ── */ :root[data-theme="light"] { --sl-color-bg-nav: var(--color-cl1-white); From 2369e1e093e6fae73e27b65319c1fa1589fd52c2 Mon Sep 17 00:00:00 2001 From: Mohamed Hassan <87046460+MohamedH1998@users.noreply.github.com> Date: Thu, 19 Mar 2026 22:54:02 +0000 Subject: [PATCH 11/12] Update src/components/overrides/SidebarSublist.astro Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --- src/components/overrides/SidebarSublist.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro index 413d90b0345..5cd0031adc0 100644 --- a/src/components/overrides/SidebarSublist.astro +++ b/src/components/overrides/SidebarSublist.astro @@ -88,7 +88,7 @@ const restoreIndices = sublist.map((entry) => : "font-medium text-[var(--sidebar-text)]", ]}> - {entry.label} + {entry.label} {entry.badge && ( Date: Fri, 20 Mar 2026 14:10:12 +0000 Subject: [PATCH 12/12] style: header design improvements (#29123) * style: header design tweaks * fix: align vertically * style: toc design improvements (#29124) * style: toc design improvements * fix: keyboard nav in feedback form * fix: decrease textarea rows * fix: vertical alignment of the toc * Update src/components/overrides/TableOfContents.astro Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --------- Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --------- Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --- src/components/FeedbackPrompt.tsx | 93 +++++--- src/components/HeaderDropdowns.tsx | 16 +- src/components/changelog/Header.astro | 25 ++- src/components/overrides/Footer.astro | 8 - src/components/overrides/Header.astro | 99 +++++++-- src/components/overrides/PageTitle.astro | 4 + src/components/overrides/Sidebar.astro | 2 +- .../overrides/TableOfContents.astro | 203 ++++++++++++++---- src/styles/sidebar.css | 2 + src/styles/tailwind.css | 37 ++++ 10 files changed, 377 insertions(+), 112 deletions(-) diff --git a/src/components/FeedbackPrompt.tsx b/src/components/FeedbackPrompt.tsx index f705af5b562..9fd2730c048 100644 --- a/src/components/FeedbackPrompt.tsx +++ b/src/components/FeedbackPrompt.tsx @@ -1,6 +1,10 @@ import { useState } from "react"; +import { + MdOutlineThumbUp, + MdOutlineThumbDown, + MdCheckCircleOutline, +} from "react-icons/md"; import { Turnstile } from "@marsidev/react-turnstile"; -import { MdOutlineThumbUp, MdOutlineThumbDown } from "react-icons/md"; import { track } from "~/util/zaraz"; type SetState = React.Dispatch>; @@ -30,26 +34,28 @@ function Buttons({ setOption: SetState<"yes" | "no" | undefined>; }) { return ( - <> +
- +
); } @@ -89,39 +95,65 @@ function Form({ } return ( -
- {questions[option].map(([label, value]) => ( - - ))} + +
+ + {option === "yes" ? "What did you like?" : "What went wrong?"} + +
+ {questions[option].map(([label, value]) => ( + + ))} +
+