I need to make a collapsing sidebar that instead of using a stationary Hamburger Icon, uses a expand/collapse arrow that is on the border of the sidebar. I found an example of how to do it in CSS/Bootstrap and I would like to figure out how to do the same thing the Radzen way without resorting to writing it all from scratch or creating a Frankenstein chunk of code.
How can I place the RadzenSidebarToggle centered on the right edge of the sidebar and have it move with the sidebar as it resizes?
Hi @Greg_Wilson,
You could use RadzenToggleButton
to achieve the desired functionality. Place the button right inside <RadzenBody>
<RadzenBody>
<RadzenToggleButton
Click="@(() => sidebarExpanded = !sidebarExpanded)"
Icon="keyboard_double_arrow_left"
ToggleIcon="keyboard_double_arrow_right"
Variant="Radzen.Variant.Flat"
ButtonStyle="Radzen.ButtonStyle.Base"
Shade="Radzen.Shade.Default"
ToggleButtonStyle="Radzen.ButtonStyle.Base"
ToggleShade="Radzen.Shade.Default"
Size="Radzen.ButtonSize.Medium"
class="my-sidebar-toggle"
/>
<style>
.my-sidebar-toggle {
position: sticky;
top: 0;
margin-left: -1rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>
@code {
bool sidebarExpanded = true;
}
1 Like