Collapsing Sidebar with Expand Arrow

[Greg_Wilson]

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?

[yordanov]

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;
}