deepdrft/DeepDrftWeb.Client/Layout/DeepDrftMenu.razor

@using DeepDrftWeb.Client.Controls
@using DeepDrftWeb.Client.Services

<MudAppBar Elevation="@Elevation">
    <div class="d-inline-flex align-center flex-1 justify-space-between">
        @if (_isDesktop)
        {
            <div>
                <MudStack Row AlignItems="AlignItems.Center" Spacing="6">
                    <MudLink Href="/" Underline="Underline.None">
                        <MudStack Row AlignItems="AlignItems.Center">    
                            <MudAvatar Class="mr-2">
                                <MudImage Src="img/deepdrft-logo.jpg"></MudImage>
                            </MudAvatar>
                            <div>Deep DRFT</div>
                        </MudStack>
                    </MudLink>
                </MudStack>
            </div>
        
            <div>
                <MudStack Spacing="8" Row AlignItems="AlignItems.Center">
                    @foreach (PageRoute thePage in Pages.AllPages)
                    {
                        <AppNavLink Href="@thePage.Route" Icon="@thePage.Icon">@thePage.Name</AppNavLink>
                    }
                </MudStack>
            </div>
        }
        else
        {
            <div>
                <MudStack Row AlignItems="AlignItems.Center">
                    <MudMenu RelativeWidth="DropdownWidth.Adaptive">
                        <ActivatorContent>
                            <MudStack Row AlignItems="AlignItems.Center" Spacing="4">
                                <MudIcon Icon="@Icons.Material.Filled.Menu"/>
                                <MudAvatar Class="mr-2">
                                    <MudImage Src="img/deepdrft-logo.jpg"></MudImage>
                                </MudAvatar>
                                <div>Deep DRFT</div>
                            </MudStack>
                        </ActivatorContent>
                        <ChildContent>
                            @foreach (PageRoute route in Pages.AllPages)
                            {
                                <MudMenuItem Href="@route.Route" Class="px-6">
                                    <MudStack Row AlignItems="AlignItems.Center">
                                        <MudIcon Icon="@route.Icon" Color="Color.Primary"/>   
                                        <MudText Typo="Typo.button" Color="Color.Primary">
                                            @route.Name
                                        </MudText>
                                    </MudStack>
                                </MudMenuItem>
                            }
                        </ChildContent>
                    </MudMenu>
                </MudStack>
            </div>
        }
        
        <div>
            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
        </div>
    </div>
</MudAppBar>

@code {
    [Inject] public required IBrowserViewportService BrowserViewportService { get; set; }
    [Inject] public required DarkModeCookieService DarkModeCookieService { get; set; }
    [Parameter] public int Elevation { get; set; }
    [Parameter] public required bool IsDarkMode { get; set; }
    [Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
    
    private bool _isDesktop = true;
    private Guid _viewportSubscriptionId;

    protected override async Task OnInitializedAsync()
    {
        IsDarkMode = DarkModeCookieService.GetDarkModeAsync();
        await IsDarkModeChanged.InvokeAsync(IsDarkMode);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var breakpoint = await BrowserViewportService.GetCurrentBreakpointAsync();
            _isDesktop = breakpoint >= Breakpoint.Sm;

            _viewportSubscriptionId = Guid.NewGuid();
            await BrowserViewportService.SubscribeAsync(
                _viewportSubscriptionId,
                args =>
                {
                    _isDesktop = args.Breakpoint >= Breakpoint.Sm;
                    InvokeAsync(StateHasChanged);
                },
                new ResizeOptions { NotifyOnBreakpointOnly = true },
                fireImmediately: true);

            StateHasChanged();
        }
    }
    
    private string DarkLightModeButtonIcon => IsDarkMode switch
    {
        true => DDIcons.GasLampLit,
        false => DDIcons.GasLamp,
    };
    
    private async Task DarkModeToggle()
    {
        IsDarkMode = !IsDarkMode;
        await DarkModeCookieService.SetDarkModeAsync(IsDarkMode);
        await IsDarkModeChanged.InvokeAsync(IsDarkMode);
    }
}