SideBarComponent.razor

@namespace Blazor_MAUI_Demos.Shared

<div class="@classNames" @onclick="@sidbarClick" @onclick:stopPropagation="true">
    @ChildContent
</div>

@code {

    /// <summary>
    /// Child content of SideBar component.
    /// </summary>
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    /// <summary>
    /// Specifies the position of the sidebar.
    /// </summary>
    [Parameter]
    public SidebarPlacement Position { get; set; }

    /// <summary>
    /// Specifies whether the sidebar is in expanded state or not.
    /// </summary>
    [Parameter]
    public bool IsExpanded { get; set; } = true;

    private string classNames { get; set; }

    // Sidebar click handler to stop propagation
    protected void sidbarClick()
    {
        // No actions required
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        classNames = SampleUtils.SIDEBAR_CLASS;
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        if (Position == SidebarPlacement.Left)
        {
            classNames = SampleUtils.AddClass(classNames, SampleUtils.LEFT_CLASS);
        }
        else
        {
            classNames = SampleUtils.AddClass(classNames, SampleUtils.RIGHT_CLASS);
        }
        if (this.IsExpanded)
        {
            classNames = SampleUtils.RemoveClass(classNames, SampleUtils.HIDDEN);
            classNames = SampleUtils.AddClass(classNames, SampleUtils.VISIBLE);
        }
        else
        {
            classNames = SampleUtils.RemoveClass(classNames, SampleUtils.VISIBLE);
            classNames = SampleUtils.AddClass(classNames, SampleUtils.HIDDEN);
        }
    }
}