From f0618bfba6c194ea25495e0f4425a75194b70f7a Mon Sep 17 00:00:00 2001 From: Shephard Tseisi Date: Fri, 24 Jul 2026 23:44:13 +0200 Subject: [PATCH 1/3] feat: implement toggleable sections in DocsSidebar for improved content display --- .../Chrome/DocsSidebar.razor.css | 16 ++++++++++++++++ .../Chrome/DocsSidebarNode.razor | 13 ++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/ShellDocs.Components/Chrome/DocsSidebar.razor.css b/src/ShellDocs.Components/Chrome/DocsSidebar.razor.css index 6a90cf2..2f35aff 100644 --- a/src/ShellDocs.Components/Chrome/DocsSidebar.razor.css +++ b/src/ShellDocs.Components/Chrome/DocsSidebar.razor.css @@ -120,6 +120,22 @@ transform: rotate(90deg); } +/* Toggleable section content — grid-rows 0fr→1fr animates to natural height + without needing a fixed max-height. The inner wrapper carries the actual + items and MUST have `min-height: 0` so it can collapse cleanly. */ +::deep .sidebar-section-shell { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1); +} +::deep .sidebar-section-shell[data-open="true"] { + grid-template-rows: 1fr; +} +::deep .sidebar-section-shell > .sidebar-section-items { + overflow: hidden; + min-height: 0; +} + ::deep .sidebar-section-items { display: flex; flex-direction: column; diff --git a/src/ShellDocs.Components/Chrome/DocsSidebarNode.razor b/src/ShellDocs.Components/Chrome/DocsSidebarNode.razor index 8bdeef0..afbd4f3 100644 --- a/src/ShellDocs.Components/Chrome/DocsSidebarNode.razor +++ b/src/ShellDocs.Components/Chrome/DocsSidebarNode.razor @@ -23,7 +23,18 @@ else if (Node.Kind == NodeKind.Section) } } - @if (!_isToggleable || _isOpen) + @if (_isToggleable) + { +
+
+ @foreach (var child in Node.Children) + { + + } +
+
+ } + else {
@foreach (var child in Node.Children) From 324c300edfdddf2c4321514d0084f4c6b6a9642a Mon Sep 17 00:00:00 2001 From: Shephard Tseisi Date: Fri, 24 Jul 2026 23:44:27 +0200 Subject: [PATCH 2/3] style: add transition effects to SVG icons in ComponentPreview and PreviewFrame for improved user interaction --- src/ShellDocs.Components/Content/ComponentPreview.razor.css | 3 ++- src/ShellDocs.Components/Content/PreviewFrame.razor.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ShellDocs.Components/Content/ComponentPreview.razor.css b/src/ShellDocs.Components/Content/ComponentPreview.razor.css index ec63157..490bcfa 100644 --- a/src/ShellDocs.Components/Content/ComponentPreview.razor.css +++ b/src/ShellDocs.Components/Content/ComponentPreview.razor.css @@ -127,4 +127,5 @@ border-color: color-mix(in oklch, var(--border) 60%, var(--foreground)); } .component-preview-copy.copied { color: var(--success, oklch(0.723 0.219 149.579)); } -.component-preview-copy svg { width: 0.8125rem; height: 0.8125rem; } +.component-preview-copy svg { width: 0.8125rem; height: 0.8125rem; transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1); } +.component-preview-copy.copied svg { transform: scale(1.15); } diff --git a/src/ShellDocs.Components/Content/PreviewFrame.razor.css b/src/ShellDocs.Components/Content/PreviewFrame.razor.css index 62e81cd..54e9a49 100644 --- a/src/ShellDocs.Components/Content/PreviewFrame.razor.css +++ b/src/ShellDocs.Components/Content/PreviewFrame.razor.css @@ -116,4 +116,5 @@ border-color: color-mix(in oklch, var(--border) 60%, var(--foreground)); } .preview-copy.copied { color: var(--success, oklch(0.723 0.219 149.579)); } -.preview-copy svg { width: 0.8125rem; height: 0.8125rem; } +.preview-copy svg { width: 0.8125rem; height: 0.8125rem; transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1); } +.preview-copy.copied svg { transform: scale(1.15); } From e0f2548352083f6048efe8dce1c284d96db30c1b Mon Sep 17 00:00:00 2001 From: Shephard Tseisi Date: Fri, 24 Jul 2026 23:44:56 +0200 Subject: [PATCH 3/3] style: add view-transition and reduced-motion support to shelldocs-theme.css for enhanced user experience --- .../wwwroot/shelldocs-theme.css | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/ShellDocs.Components/wwwroot/shelldocs-theme.css b/src/ShellDocs.Components/wwwroot/shelldocs-theme.css index 8bfd23b..f8a9647 100644 --- a/src/ShellDocs.Components/wwwroot/shelldocs-theme.css +++ b/src/ShellDocs.Components/wwwroot/shelldocs-theme.css @@ -193,3 +193,26 @@ pre.shiki, pre.shiki span { color: var(--shiki-light); } :root.dark pre.shiki, :root.dark pre.shiki span { color: var(--shiki-dark); } + +/* View-transitions — the browser diffs old vs new page and cross-fades + automatically when Blazor enhanced navigation swaps the DOM. Progressive: + Chromium supports today; other engines just no-op the pseudo rules. */ +@view-transition { navigation: auto; } +::view-transition-old(root), +::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } + +/* Global reduced-motion guard — respects the OS preference so animations + collapse to instant while transitions still fire (kept at 0.01ms so JS + `transitionend` handlers still trigger). */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + ::view-transition-old(root), + ::view-transition-new(root) { animation: none !important; } +}