MainLayout.razor

@using Syncfusion.Blazor;
@using Microsoft.AspNetCore.Components;
@using Microsoft.AspNetCore.Components.Routing;
@using Syncfusion.Blazor.Buttons;

@using Blazor_MAUI_Demos.Shared;
@using System.Globalization;
@using System.Text.RegularExpressions;

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

@inherits LayoutComponentBase;
@implements IDisposable;

<CascadingValue Value="@this">
    <SpinnerComponent @ref="spinnerRef"></SpinnerComponent>
    @*Set empty layout to home page and components which have open in new window functionality.*@
    @{
        var isEmptyLayout = SampleService.SampleInfo != null && !UriHelper.Uri.Contains(SampleService.SampleInfo.Url) && SampleService.SampleInfo.MappingSampleName != null;
    }
    @if (SampleUtils.IsHomePage(UriHelper) || isEmptyLayout)
    {
        foreach (var fileName in SampleBrowser.PreLoadFiles)
        {
            <link href="@fileName" as="font" type="font/woff2" crossorigin />
        }
        <CascadingValue Value="isDeviceMode" Name="IsDevice">
            <div>
                @Body
            </div>
        </CascadingValue>
    }
    else
    {
        <div class="sample-browser e-view sf-new" @onclick="OnAppClick">
            <div class="sb-mobile-overlay sb-hide"></div>
            <HeaderComponent @ref="headerRef" OnToggleClick="@OnToggleClick" OnRightToggleClick="@OnRightToggleClick" OnSearchRender="@OnSearchRender"></HeaderComponent>
            <div class="sb-content e-view">
                <div class="@searchContainer">
                    <div class="index-search-container">
                        <SearchComponent @ref="@searchRef"></SearchComponent>
                    </div>
                </div>
                <RightPaneComponent @ref="RightPaneRef">@Body</RightPaneComponent>
            </div>
        </div>
    }
</CascadingValue>
<Syncfusion.Blazor.Popups.SfDialogProvider />
<style>
    h1:focus {
        outline: none;
    }
</style>

@code {
    [Inject]
    protected SyncfusionBlazorService SyncfusionService { get; set; }

    [Inject]
    private NavigationManager navigationManager { get; set; }

    private bool isDeviceMode { get; set; }
    private bool isSearchIconClick { get; set; }
    private string searchContainer { get; set; }
    private bool rightSidebarExpanded { get; set; }
    public SpinnerComponent spinnerRef { get; set; }
    private DotNetObjectReference<object> dotnetObjectRef { get; set; }
    private SearchComponent searchRef { get; set; }
    public HeaderComponent headerRef { get; set; }

    /// <summary>
    /// Specifies the app is rendering in tablet or not.
    /// </summary>
    public bool isTablet { get; set; }

    /// <summary>
    /// LeftPane reference for outside usage.
    /// </summary>
    public LeftPaneComponent LeftPaneRef { get; set; }
    /// <summary>
    /// RightPane reference for outside usage.
    /// </summary>
    public RightPaneComponent RightPaneRef { get; set; }

    /// <summary>
    /// SampleNavigator reference for outside usage.
    /// </summary>
    public SampleNavigator SampleNavigatorRef { get; set; }

    // Left sidebar click handler
    private async Task OnToggleClick()
    {
        if (headerRef.isNotifyClicked)
        {
            headerRef.NotifyClicked();
        }
        if (SampleService.IsDevice && rightSidebarExpanded)
        {
            rightSidebarExpanded = !rightSidebarExpanded;
        }
        await JsRuntime.InvokeAsync<string>("callResizeEvent");
        await ShowSearchLayout();
    }

    // Right sidebar click handler
    private async Task OnRightToggleClick()
    {
        // Update right sidebar expand and collapse status
        rightSidebarExpanded = !rightSidebarExpanded;
        await ShowSearchLayout();
        if (headerRef.isNotifyClicked)
        {
            headerRef.NotifyClicked();
        }
    }

    // Home icon click handler.
    private async Task HomeIconClick()
    {
        await LeftPaneRef.HomeButtonClick();
    }

    // Search icon click handler.
    private async Task OnSearchRender()
    {
        await ShowSearchLayout(true);
    }

    // App click handler for collapse the sidebar components in device rendering.
    private async Task OnAppClick()
    {
        this.CollapseSideBar();
        if (headerRef != null && headerRef.dropdownRef != null)
        {
            if (!headerRef.dropdownRef.isthemepopupopen)
            {
                headerRef.dropdownRef.popupClass = SampleUtils.AddClass(headerRef.dropdownRef.popupClass, SampleUtils.DISPLAY_NONE);
            }
            headerRef.dropdownRef.isthemepopupopen = false;
            headerRef.HidePreferences();
        }
        if (searchRef.IsFocusOut() && !isSearchIconClick)
        {
            // Await the search layout hide process for the search list selection.
            await Task.Delay(200);
            await ShowSearchLayout();
        }
        else
        {
            isSearchIconClick = false;
        }     
        var isSettingsPopUpOpen = await JsRuntime.InvokeAsync<bool>("isSettingsPopUpOpen");
        if(isSettingsPopUpOpen){
            headerRef.OnSettingsClick();
        }
    }

    // Location change event handler
    private async void LocationChanged(object sender, LocationChangedEventArgs e)
    {
        // Get dynamic resource list.
        var resources = SampleUtils.GetDynamicResources(UriHelper, SampleService);
        var jsResources = SampleUtils.GetDynamicJSResources(UriHelper, SampleService);

        if (resources.Count > 0)
        {
            await this.JsRuntime.InvokeVoidAsync("sfBlazorSB.loadResources", resources);
        }
        if (jsResources.Count > 0)
        {
            await this.JsRuntime.InvokeVoidAsync("sfBlazorSB.loadResources", jsResources);
        }
    }

    /// <summary>
    /// Show search layout in the demos page.
    /// </summary>
    public async Task ShowSearchLayout(bool isIconClick = false, bool isEscPressed = false)
    {
        if (isIconClick && searchContainer.Contains(SampleUtils.DISPLAY_NONE))
        {
            if (headerRef.isNotifyClicked)
            {
                headerRef.NotifyClicked();
            }
            isSearchIconClick = isIconClick;
            searchContainer = SampleUtils.RemoveClass(searchContainer, SampleUtils.DISPLAY_NONE);
            await searchRef.InputFocus();
        }
        else
        {
            searchContainer = SampleUtils.AddClass(searchContainer, SampleUtils.DISPLAY_NONE);
        }
        if (isEscPressed)
        {
            StateHasChanged();
        }
    }

    /// <summary>
    /// Collapse both right and left sidebar component.
    /// </summary>
    public void CollapseSideBar()
    {
        if (SampleService.IsDevice)
        {
            // Collapse left sidebar if it is expanded on document click
            if (LeftPaneRef.IsExpanded())
            {
                LeftPaneRef.UpdateExpandedState();
            }
            // Collapse right sidebar if it is expanded on document click
            if (rightSidebarExpanded)
            {
                rightSidebarExpanded = !rightSidebarExpanded;
            }
        }
    }

    /// <summary>
    /// Update device mode while resizing window through UI.
    /// </summary>
    /// <param name="isDevice">Specifies the current resolution is device mode or not.</param>
    [JSInvokable]
    public void UpdateDeviceMode(bool isDevice, bool isTablet)
    {
        isDeviceMode = isDevice;
        SampleService.IsDevice = isDevice;
        if (isTablet)
        {
            RightPaneRef?.SampleNavigatorRef.Rerender(SampleService.IsDevice, isTablet);
        }
        StateHasChanged();
    }

    protected override async void OnInitialized()
    {
        base.OnInitialized();
        UriHelper.LocationChanged += LocationChanged;
        // Enable ripple effect to the material theme.
        SyncfusionService.EnableRipple(UriHelper.Uri.IndexOf("material") > 0);
        searchContainer = SampleUtils.SEARCH_OVERLAY + SampleUtils.SPACE + SampleUtils.DISPLAY_NONE;

        //For getting the user preferred language for localization
        string userSelectedCulture = null;
        if (userSelectedCulture != null)
        {
            var customisedCulture = new CultureInfo(userSelectedCulture);
            CultureInfo.DefaultThreadCurrentCulture = customisedCulture;
            CultureInfo.DefaultThreadCurrentUICulture = customisedCulture;
        }
        // Condition to check whether the URL query params contains the proper theme name. If the URL query params donesn't contains the theme name, the URL redirects to existing component URL without query params.
        // Due to this redirection, we can prevent our site from multiple vulnerability attacks from hackers.
        string themeName = System.Web.HttpUtility.ParseQueryString(new Uri(this.navigationManager.Uri).Query).Get("theme");
        if (!string.IsNullOrEmpty(themeName) && !SampleUtils.ThemeData.Any((theme => theme.ID == themeName)) && themeName != "tailwind" && themeName != "tailwind-dark")
        {
            this.navigationManager.NavigateTo(this.navigationManager.Uri.Split("?")[0], forceLoad: true);
        }

    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            // Add Spinner ref to the sample servie to get access in SampleBaseComponent class.
            if (SampleService.Spinner == null)
            {
                SampleService.Spinner = spinnerRef;
            }

            dotnetObjectRef = DotNetObjectReference.Create<object>(this);
            // Get device information for mobile sidebar rendering
            if (Microsoft.Maui.Devices.DeviceInfo.Platform == DevicePlatform.iOS || Microsoft.Maui.Devices.DeviceInfo.Platform == DevicePlatform.Android)
            {
                this.SampleService.IsDevice = false;
            }
            this.DeviceMode.Isdevice = this.SampleService.IsDevice;
            this.isDeviceMode = this.SampleService.IsDevice;
            if (this.SampleService.IsDevice)
            {
                LeftPaneRef?.UpdateExpandedState();
                StateHasChanged();
            }
            // Update home page or demo page loaded property in SampleService.
            SampleUtils.GetDynamicResources(UriHelper, SampleService);
        }
        else
        {
            // Refresh meta data for home page navigation.
            if (UriHelper.BaseUri == UriHelper.Uri)
            {
                SampleService.MetaData?.Refresh();
            }
        }
        if (!firstRender && LeftPaneRef != null && LeftPaneRef.NavMenuRef.isNavigate)
        {
            LeftPaneRef.NavMenuRef.isNavigate = false;
        }
      
    }
    public void Dispose()
    {
        dotnetObjectRef?.Dispose();
        UriHelper.LocationChanged -= LocationChanged;
    }
}