feat(Layout): add IsExpandOnHover parameter for click-to-expand sidebar - #8349
Open
h2ls wants to merge 2 commits into
Open
feat(Layout): add IsExpandOnHover parameter for click-to-expand sidebar#8349h2ls wants to merge 2 commits into
h2ls wants to merge 2 commits into
Conversation
When IsExpandOnHover is false, the collapsed sidebar no longer expands on mouse hover. Instead it expands on click and collapses again when the mouse leaves the sidebar area. Default is true, keeping the existing hover behavior.
|
Thanks for your PR, @h2ls. Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
Contributor
Reviewer's GuideAdds a configurable interaction mode for collapsed sidebars on the Layout component by introducing an IsExpandOnHover parameter, wiring click/hover event handlers, adjusting CSS classes and styles, and adding unit tests to cover both behaviors. Sequence diagram for click-to-expand sidebar interaction when IsExpandOnHover is falsesequenceDiagram
actor User
participant Sidebar as layout_side
participant Layout
User->>Sidebar: click
Sidebar->>Layout: OnClickSidebar()
alt [IsCollapsed && !IsExpandOnHover && !_isSidebarExpand]
Layout->>Layout: _isSidebarExpand = true
Layout->>Sidebar: StateHasChanged()
end
User->>Sidebar: mouseleave
Sidebar->>Layout: OnMouseLeaveSidebar()
alt [_isSidebarExpand]
Layout->>Layout: _isSidebarExpand = false
Layout->>Sidebar: StateHasChanged()
end
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- Consider resetting
_isSidebarExpandwhenIsCollapsedorIsExpandOnHoveris updated externally (e.g., inOnParametersSet), to avoid the sidebar remaining visually expanded while the parent considers it collapsed. - In
OnMouseLeaveSidebar, adding an explicit!IsExpandOnHovercheck alongside_isSidebarExpandwould make the intent clearer and help prevent future changes from accidentally using click-collapse semantics in hover mode.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider resetting `_isSidebarExpand` when `IsCollapsed` or `IsExpandOnHover` is updated externally (e.g., in `OnParametersSet`), to avoid the sidebar remaining visually expanded while the parent considers it collapsed.
- In `OnMouseLeaveSidebar`, adding an explicit `!IsExpandOnHover` check alongside `_isSidebarExpand` would make the intent clearer and help prevent future changes from accidentally using click-collapse semantics in hover mode.
## Individual Comments
### Comment 1
<location path="src/BootstrapBlazor/Components/Layout/Layout.razor.cs" line_range="779-786" />
<code_context>
+ /// <para lang="zh">点击侧边栏回调方法 IsExpandOnHover 为 false 时点击展开侧边栏</para>
+ /// <para lang="en">Callback method when clicking the sidebar. Expands the sidebar when IsExpandOnHover is false</para>
+ /// </summary>
+ private void OnClickSidebar()
+ {
+ if (IsCollapsed && !IsExpandOnHover && !_isSidebarExpand)
+ {
+ _isSidebarExpand = true;
+ StateHasChanged();
+ }
+ }
</code_context>
<issue_to_address>
**suggestion (performance):** Remove explicit StateHasChanged calls from event handlers to avoid redundant renders.
Blazor already calls `StateHasChanged` after UI events such as `@onclick`, so the explicit call in `OnClickSidebar` is redundant and may cause extra render cycles. Unless you have a specific need for an additional render outside the normal event pipeline, you can remove this call and rely on the framework’s default behavior.
```suggestion
private void OnClickSidebar()
{
if (IsCollapsed && !IsExpandOnHover && !_isSidebarExpand)
{
_isSidebarExpand = true;
}
}
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+779
to
+786
| private void OnClickSidebar() | ||
| { | ||
| if (IsCollapsed && !IsExpandOnHover && !_isSidebarExpand) | ||
| { | ||
| _isSidebarExpand = true; | ||
| StateHasChanged(); | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
suggestion (performance): Remove explicit StateHasChanged calls from event handlers to avoid redundant renders.
Blazor already calls StateHasChanged after UI events such as @onclick, so the explicit call in OnClickSidebar is redundant and may cause extra render cycles. Unless you have a specific need for an additional render outside the normal event pipeline, you can remove this call and rely on the framework’s default behavior.
Suggested change
| private void OnClickSidebar() | |
| { | |
| if (IsCollapsed && !IsExpandOnHover && !_isSidebarExpand) | |
| { | |
| _isSidebarExpand = true; | |
| StateHasChanged(); | |
| } | |
| } | |
| private void OnClickSidebar() | |
| { | |
| if (IsCollapsed && !IsExpandOnHover && !_isSidebarExpand) | |
| { | |
| _isSidebarExpand = true; | |
| } | |
| } |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an opt-in “click-to-expand” behavior for collapsed Layout sidebars via a new IsExpandOnHover parameter, preserving the existing hover-expand behavior by default.
Changes:
- Introduces
IsExpandOnHover(defaulttrue) and click/mouse-leave handlers to support click-to-expand when disabled. - Updates sidebar markup and styles to switch between hover-expand and click-expand modes (
is-click-expand,is-expand). - Adds a unit test covering the new parameter behavior.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| test/UnitTest/Components/LayoutTest.cs | Adds a unit test for IsExpandOnHover click-expand behavior (needs adjustment to validate the intended scenario). |
| src/BootstrapBlazor/Components/Layout/Layout.razor.scss | Gates hover-expand rules behind :not(.is-click-expand) and adds click-expand rules driven by .is-expand. |
| src/BootstrapBlazor/Components/Layout/Layout.razor.cs | Adds IsExpandOnHover, new CSS class logic, and click/mouse-leave handlers with internal _isSidebarExpand state. |
| src/BootstrapBlazor/Components/Layout/Layout.razor | Hooks @onclick / @onmouseleave to the sidebar <aside>. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+252
to
+255
| // 默认悬停展开 不追加 is-click-expand 样式 | ||
| cut.Render(pb => pb.Add(a => a.IsExpandOnHover, true)); | ||
| cut.WaitForAssertion(() => Assert.DoesNotContain("is-click-expand", cut.Markup)); | ||
| } |
Comment on lines
510
to
514
| private string? SideClassString => CssBuilder.Default("layout-side") | ||
| .AddClass("is-fixed-header", IsFixedHeader) | ||
| .AddClass("is-fixed-footer", IsFixedFooter) | ||
| .AddClass("is-expand", _isSidebarExpand) | ||
| .Build(); |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8349 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 771 771
Lines 34546 34564 +18
=========================================
+ Hits 34546 34564 +18
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #8348
Summary By Copilot
Add a new
IsExpandOnHoverparameter to theLayoutcomponent (defaulttrue, preserving existing behavior). When set tofalse, the collapsed sidebar no longer expands on mouse hover; instead it expands on click and collapses again when the mouse leaves the sidebar area.Changes:
Layout.razor.cs: newIsExpandOnHoverparameter,is-click-expand/is-expandclass logic, click & mouse-leave handlersLayout.razor: bind@onclick/@onmouseleaveon the sidebarasideLayout.razor.scss: gate hover-expand rules behind:not(.is-click-expand), add click-expand rules driven by.is-expand; bundle css regeneratedLayoutTest.cs: new unit testIsExpandOnHover_OKRegression?
Risk
Default value keeps the existing hover behavior; click mode is opt-in only.
Verification
LayoutTest31/31 passed (including newIsExpandOnHover_OK),UniTest.Sasspassed.Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Add configurable click-based expansion for collapsed Layout sidebars while preserving hover expansion by default.
New Features:
Enhancements:
Tests: