[PR #2310] [MERGED] Sidebar Position and FullHeight options added #3186

Open
opened 2026-01-29 18:22:18 +00:00 by claunia · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/2310
Author: @yordanov
Created: 10/6/2025
Status: Merged
Merged: 10/6/2025
Merged by: @yordanov

Base: masterHead: sidebar-position


📝 Commits (2)

  • fc1c4bf Add SidebarPosition and FullHeight options to RadzenSidebar and adjust layout styles accordingly
  • 86c16a4 Update Layout demos

📊 Changes

18 files changed (+547 additions, -27 deletions)

View changed files

📝 Radzen.Blazor/Common.cs (+24 -1)
📝 Radzen.Blazor/RadzenSidebar.razor (+1 -1)
📝 Radzen.Blazor/RadzenSidebar.razor.cs (+19 -3)
📝 Radzen.Blazor/themes/components/blazor/_layout.scss (+429 -0)
📝 RadzenBlazorDemos/Pages/LayoutFullHeightSidebar.razor (+2 -2)
📝 RadzenBlazorDemos/Pages/LayoutPage.razor (+16 -0)
📝 RadzenBlazorDemos/Pages/LayoutRightFullHeightSidebar.razor (+2 -2)
📝 RadzenBlazorDemos/Pages/LayoutRightLeftSidebar.razor (+3 -3)
📝 RadzenBlazorDemos/Pages/LayoutRightSidebar.razor (+2 -2)
📝 RadzenBlazorDemos/Pages/LayoutSidebarFullHeightOverlay.razor (+2 -2)
RadzenBlazorDemos/Pages/LayoutStartEndSidebar.razor (+36 -0)
📝 RadzenBlazorDemos/Services/ExampleService.cs (+1 -1)
📝 RadzenBlazorDemos/Shared/HomeLayout.razor (+3 -3)
📝 RadzenBlazorDemos/Shared/MainLayout.razor (+3 -3)
📝 RadzenBlazorDemos/wwwroot/css/fluent-base.css (+1 -1)
📝 RadzenBlazorDemos/wwwroot/css/fluent-dark-base.css (+1 -1)
📝 RadzenBlazorDemos/wwwroot/css/material3-base.css (+1 -1)
📝 RadzenBlazorDemos/wwwroot/css/material3-dark-base.css (+1 -1)

📄 Description

Added two new options:

  • Position="SidebarPosition.Start" to position the SideBar to Left, Right, Start, End
  • FullHeight for setting the Sidebar to full height or wrapped between RadzenHeader and RadzenFooter. Default is false.

These new options eliminate the need to define grid-template in RadzenLayout.

Example

Before:

<RadzenLayout Style="grid-template-columns: 1fr auto; grid-template-areas: 'rz-header rz-header' 'rz-body rz-sidebar'">
    <RadzenSidebar>
    </RadzenSidebar>
</RadzenLayout>

After:

<RadzenLayout>
    <RadzenSidebar Position="SidebarPosition.End">
    </RadzenSidebar>
</RadzenLayout>

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/2310 **Author:** [@yordanov](https://github.com/yordanov) **Created:** 10/6/2025 **Status:** ✅ Merged **Merged:** 10/6/2025 **Merged by:** [@yordanov](https://github.com/yordanov) **Base:** `master` ← **Head:** `sidebar-position` --- ### 📝 Commits (2) - [`fc1c4bf`](https://github.com/radzenhq/radzen-blazor/commit/fc1c4bf9747bd26663020e0b45b1aeabfd2865d0) Add SidebarPosition and FullHeight options to RadzenSidebar and adjust layout styles accordingly - [`86c16a4`](https://github.com/radzenhq/radzen-blazor/commit/86c16a4685f22c64b98327b79b52e7cefadad448) Update Layout demos ### 📊 Changes **18 files changed** (+547 additions, -27 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/Common.cs` (+24 -1) 📝 `Radzen.Blazor/RadzenSidebar.razor` (+1 -1) 📝 `Radzen.Blazor/RadzenSidebar.razor.cs` (+19 -3) 📝 `Radzen.Blazor/themes/components/blazor/_layout.scss` (+429 -0) 📝 `RadzenBlazorDemos/Pages/LayoutFullHeightSidebar.razor` (+2 -2) 📝 `RadzenBlazorDemos/Pages/LayoutPage.razor` (+16 -0) 📝 `RadzenBlazorDemos/Pages/LayoutRightFullHeightSidebar.razor` (+2 -2) 📝 `RadzenBlazorDemos/Pages/LayoutRightLeftSidebar.razor` (+3 -3) 📝 `RadzenBlazorDemos/Pages/LayoutRightSidebar.razor` (+2 -2) 📝 `RadzenBlazorDemos/Pages/LayoutSidebarFullHeightOverlay.razor` (+2 -2) ➕ `RadzenBlazorDemos/Pages/LayoutStartEndSidebar.razor` (+36 -0) 📝 `RadzenBlazorDemos/Services/ExampleService.cs` (+1 -1) 📝 `RadzenBlazorDemos/Shared/HomeLayout.razor` (+3 -3) 📝 `RadzenBlazorDemos/Shared/MainLayout.razor` (+3 -3) 📝 `RadzenBlazorDemos/wwwroot/css/fluent-base.css` (+1 -1) 📝 `RadzenBlazorDemos/wwwroot/css/fluent-dark-base.css` (+1 -1) 📝 `RadzenBlazorDemos/wwwroot/css/material3-base.css` (+1 -1) 📝 `RadzenBlazorDemos/wwwroot/css/material3-dark-base.css` (+1 -1) </details> ### 📄 Description Added two new options: - `Position="SidebarPosition.Start"` to position the SideBar to Left, Right, Start, End - `FullHeight` for setting the Sidebar to full height or wrapped between RadzenHeader and RadzenFooter. Default is `false`. These new options eliminate the need to define grid-template in RadzenLayout. ### Example Before: ```html <RadzenLayout Style="grid-template-columns: 1fr auto; grid-template-areas: 'rz-header rz-header' 'rz-body rz-sidebar'"> <RadzenSidebar> </RadzenSidebar> </RadzenLayout> ``` After: ```html <RadzenLayout> <RadzenSidebar Position="SidebarPosition.End"> </RadzenSidebar> </RadzenLayout> ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-29 18:22:18 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#3186