TaikoLocalServer/TaikoWebUI/Components/MainLayout.razor

@inherits LayoutComponentBase
@inject Blazored.LocalStorage.ILocalStorageService LocalStorage
@inject AuthService AuthService
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer

@using Microsoft.Extensions.Options;
@using TaikoWebUI.Settings;



<MudThemeProvider IsDarkMode="@isDarkMode" Theme="@taikoWebUiTheme" />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="DrawerToggle" Size="Size.Small" />
        <MudBreadcrumbs Items="BreadcrumbsStateContainer.breadcrumbs" Class="p-0 top-breadcrumbs"></MudBreadcrumbs>
        <MudSpacer />
        <MudStack Spacing="3" Row="true">
            <LanguageToggle />
            <MudIconButton Icon="@DarkModeIcon" Size="Size.Small" Color="Color.Inherit" OnClick="ToggleDarkMode" />
        </MudStack>
    </MudAppBar>
    <MudDrawer Elevation="0" Style="border-right:1px solid #ededf0" @bind-Open="drawerOpen">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">@title</MudText>
        </MudDrawerHeader>
        <NavMenu />
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8 pb-8">
            @Body

            <MudScrollToTop>
                <MudFab Color="Color.Secondary" StartIcon="@Icons.Material.Filled.ArrowCircleUp" />
            </MudScrollToTop>
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    bool drawerOpen = true;
    bool isDarkMode = false;
    string title = "TaikoWebUI";

    [Inject]
    IOptions<WebUiSettings> UiSettings { get; set; } = default!;

    protected override void OnInitialized()
    {
        title = UiSettings.Value.Title;
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        BreadcrumbsStateContainer.OnChange += StateHasChanged;


        var hasDrawerOpenEntry = await LocalStorage.ContainKeyAsync("drawerOpen");

        if (hasDrawerOpenEntry)
        {
            drawerOpen = await LocalStorage.GetItemAsync<bool>("drawerOpen");
        }

        var hasDarkModeEntry = await LocalStorage.ContainKeyAsync("isDarkMode");

        if (hasDarkModeEntry)
        {
            isDarkMode = await LocalStorage.GetItemAsync<bool>("isDarkMode");
        }

        if (AuthService.LoginRequired && !AuthService.IsLoggedIn)
        {
            // If not logged in, attempt to use JwtToken from local storage to log in
            await AuthService.LoginWithAuthToken();
        }
    }

    private async Task DrawerToggle()
    {
        drawerOpen = !drawerOpen;
        await LocalStorage.SetItemAsync("drawerOpen", drawerOpen);
    }

    private async Task ToggleDarkMode()
    {
        isDarkMode = !isDarkMode;
        await LocalStorage.SetItemAsync("isDarkMode", isDarkMode);
    }

    private string DarkModeIcon => isDarkMode ? Icons.Material.Filled.BrightnessLow : Icons.Material.Filled.Brightness2;

    readonly MudTheme taikoWebUiTheme = new()
        {
            Palette = new PaletteLight()
            {
                Primary = Colors.Indigo.Default,
                PrimaryLighten = Colors.Indigo.Lighten2,
                PrimaryDarken = Colors.Indigo.Darken2,
                AppbarBackground = Colors.Indigo.Darken3,
            },
            PaletteDark = new PaletteDark()
            {
                Primary = Colors.Indigo.Accent1,
                PrimaryLighten = Colors.Indigo.Lighten4,
                PrimaryDarken = Colors.Indigo.Accent1,
            },
        };

    public void Dispose()
    {
        BreadcrumbsStateContainer.OnChange -= StateHasChanged;
    }
}