PlaylistShared/PlaylistShared.Pwa/Layout/MainLayout.razor

@using MudBlazor.Services
@using PlaylistShared.Pwa.Components.Global
@inherits LayoutComponentBase
@inject PwaUpdateService PwaUpdateService
@inject IJSRuntime JSRuntime
@inject ContextualActionBarService ContextualActionBarService
@inject IBrowserViewportService BrowserViewportService
@implements IBrowserViewportObserver

<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="1" Contextual Bottom = "@_actionBarBottom" Fixed>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@DrawerToggle" />
        @if (_actionBarContent != null)
        {
            @_actionBarContent
        }
        else
        {
            <MudSpacer />
            <LoginDisplay />
            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" Class="ml-2" />
            <MudLink Href="https://git.frigat.duckdns.org/FrigaT/PlaylistShared" Target="_blank" Color="Color.Inherit" Underline="Underline.None" Class="ml-4">
                <MudIcon Icon="@Icons.Custom.Brands.GitHub" Size="Size.Small" Class="mr-1" /> Git
            </MudLink>
        }
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen" Class="@(_actionBarBottom ? " pt-0 pb-16" : "")" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    
    <MudMainContent Class="@("d-flex flex-column" + (_actionBarBottom ? " pt-0 pb-16" : ""))" Style="height: 100dvh;">
        @Body
    </MudMainContent>
</MudLayout>

@code {
    private RenderFragment? _actionBarContent;
    private bool _actionBarBottom => _contextualPosition switch
        {
            ContextualActionBarPosition.Bottom => true,
            ContextualActionBarPosition.Top => false,
            _ => _isMobile,
        };
    private bool _isMobile = false;
    private ContextualActionBarPosition _contextualPosition = ContextualActionBarPosition.Default;

    private bool _drawerOpen = true;
    private bool _isDarkMode = true;
    private MudTheme? _theme;

    private DotNetObjectReference<PwaUpdateService>? _dotNetRef;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        _theme = new()
        {
            PaletteLight = _lightPalette,
            PaletteDark = _darkPalette,
            LayoutProperties = new LayoutProperties()
        };

        ContextualActionBarService.OnChanged += OnContextualChangedHandler;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _dotNetRef = DotNetObjectReference.Create(PwaUpdateService);
            await JSRuntime.InvokeVoidAsync("registerSWMessageHandler", _dotNetRef);
            await BrowserViewportService.SubscribeAsync(this, fireImmediately: true);
        }
    }

    private void OnContextualChangedHandler()
    {
        _actionBarContent = ContextualActionBarService.Content;
        _contextualPosition = ContextualActionBarService.Position;
        StateHasChanged();
    }

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }

    private void DarkModeToggle()
    {
        _isDarkMode = !_isDarkMode;
    }

    private readonly PaletteLight _lightPalette = new()
    {
        Black = "#110e2d",
        AppbarText = "#424242",
        AppbarBackground = "rgba(255,255,255,0.8)",
        DrawerBackground = "#ffffff",
        GrayLight = "#e8e8e8",
        GrayLighter = "#f9f9f9",
    };

    private readonly PaletteDark _darkPalette = new()
    {
        Primary = "#7e6fff",
        Surface = "#1e1e2d",
        Background = "#1a1a27",
        BackgroundGray = "#151521",
        AppbarText = "#92929f",
        AppbarBackground = "rgba(26,26,39,0.8)",
        DrawerBackground = "#1a1a27",
        ActionDefault = "#74718e",
        ActionDisabled = "#9999994d",
        ActionDisabledBackground = "#605f6d4d",
        TextPrimary = "#b2b0bf",
        TextSecondary = "#92929f",
        TextDisabled = "#ffffff33",
        DrawerIcon = "#92929f",
        DrawerText = "#92929f",
        GrayLight = "#2a2833",
        GrayLighter = "#1e1e2d",
        Info = "#4a86ff",
        Success = "#3dcb6c",
        Warning = "#ffb545",
        Error = "#ff3f5f",
        LinesDefault = "#33323e",
        TableLines = "#33323e",
        Divider = "#292838",
        OverlayLight = "#1e1e2d80",
    };

    public string DarkLightModeButtonIcon => _isDarkMode switch
    {
        true => Icons.Material.Rounded.AutoMode,
        false => Icons.Material.Outlined.DarkMode,
    };

    

    Guid IBrowserViewportObserver.Id { get; } = Guid.NewGuid();

    ResizeOptions IBrowserViewportObserver.ResizeOptions { get; } = new()
    {
        ReportRate = 250,
        NotifyOnBreakpointOnly = true
    };

    Task IBrowserViewportObserver.NotifyBrowserViewportChangeAsync(BrowserViewportEventArgs browserViewportEventArgs)
    {
        _isMobile = browserViewportEventArgs.Breakpoint <= Breakpoint.Sm;

        return InvokeAsync(StateHasChanged);
    }
}