LeftPaneComponent.razor

@namespace Blazor_MAUI_Demos.Shared

@inject IJSRuntime JsRuntime;
@inject SampleService SampleService;
@inject NavigationManager UriHelper;

<SideBarComponent Position="SidebarPlacement.Left" IsExpanded="@isOpen">
    <div class='sb-left-pane e-view'>
        <div class="sb-left-pane-header">
            <div class="sb-header-top">
                <div class="sb-sf">
                    <div class="sb-mobile-logo"></div>
                    <div class="sb-name" @onclick="HomeButtonClick">@SampleService.DemoType</div>
                </div>
            </div>
        </div>
        <div class='sb-control-navigation e-view'>
            <NavMenuComponent @ref="NavMenuRef"></NavMenuComponent>
        </div>
        @if (SampleService.IsDevice)
        {
            <div class='sb-left-footer'>
                <div class="sb-mobile-header-buttons">
                    <a href='https://www.syncfusion.com/blazor-components' target="_blank" rel="noopener">
                        <div class="sb-mobile-header-about">
                            About
                        </div>
                    </a>
                    <a href='https://www.syncfusion.com/downloads/blazor/' target="_blank" rel="noopener">
                        <div class="sb-mobile-header-price">Pricing</div>
                    </a>
                </div>
                <div class='sb-left-footer-links'></div>
            </div>
        }
    </div>
</SideBarComponent>

@if (SampleService.IsDevice)
{
    <style>
        .sb-mobile-logo {
            background: url(@(SampleService.ImagePath + "syncfusion-mobile-logo.svg")) no-repeat;
        }
    </style>
}

@code {

    private bool isOpen { get; set; }

    /// <summary>
    /// NavMenuComponent reference for outside usage.
    /// </summary>
    public NavMenuComponent NavMenuRef { get; set; }

    /// <summary>
    /// Expand or collapse SideBarComonent based on its previous state.
    /// </summary>
    public void UpdateExpandedState()
    {
        this.isOpen = !isOpen;
        StateHasChanged();
    }

    /// <summary>
    /// Returns bool value for expanded state of the component.
    /// </summary>
    public bool IsExpanded()
    {
        return isOpen;
    }

    // Home button click handler
    public async Task HomeButtonClick()
    {
        // Set default values to SampleService for home page navigation.
        SampleService.ComponentName = null;
        SampleService.CurrentSampleUrl = null;
        SampleService.SampleInfo = null;
        SampleService.Spinner.Show();
        UriHelper.NavigateTo(UriHelper.BaseUri, true);
        var themeName = SampleUtils.GetThemeName(UriHelper.Uri);
        await JsRuntime.InvokeVoidAsync("sfBlazorSB.updateBodyClass", themeName);
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        this.isOpen = true;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            // Collapse the SideBarComponent for device rendering.
            if (SampleService.IsDevice)
            {
                this.isOpen = !SampleService.IsDevice;
                StateHasChanged();
            }
        }
    }
}