deepdrft/DeepDrftWeb.Client/Layout/DeepDrftMenu.razor

@using DeepDrftWeb.Client.Common
@using DeepDrftWeb.Client.Services
@implements IAsyncDisposable

<nav class="@NavClass">
    <a class="dd-nav-brand" href="/">Deep DRFT</a>

    @if (_isDesktop)
    {
        <ul class="dd-nav-links">
            @foreach (var navPage in Pages.MenuPages)
            {
                <li>
                    <a href="@navPage.Route" class="dd-nav-link">@navPage.Name</a>
                </li>
            }
        </ul>

        <div class="dd-nav-actions">
            <a href="/tracks" class="dd-nav-cta">Stream Now &#9654;</a>
            <button type="button"
                    class="dd-nav-toggle"
                    aria-label="Toggle dark mode"
                    aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
                    @onclick="DarkModeToggle">
                @((MarkupString)DarkLightModeIconSvg)
            </button>
        </div>
    }
    else
    {
        <div class="dd-nav-actions">
            <button type="button"
                    class="dd-nav-toggle"
                    aria-label="Toggle dark mode"
                    aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
                    @onclick="DarkModeToggle">
                @((MarkupString)DarkLightModeIconSvg)
            </button>
            <button type="button"
                    class="dd-nav-hamburger"
                    aria-label="Toggle navigation"
                    aria-expanded="@_mobileMenuOpen.ToString().ToLowerInvariant()"
                    @onclick="ToggleMobileMenu">
                <span></span><span></span><span></span>
            </button>
        </div>

        @if (_mobileMenuOpen)
        {
            <ul class="dd-nav-links dd-nav-links-mobile">
                @foreach (var navPage in Pages.MenuPages)
                {
                    <li>
                        <a href="@navPage.Route" class="dd-nav-link" @onclick="CloseMobileMenu">@navPage.Name</a>
                    </li>
                }
                <li>
                    <a href="/tracks" class="dd-nav-cta" @onclick="CloseMobileMenu">Stream Now &#9654;</a>
                </li>
            </ul>
        }
    }
</nav>

@code {
    [Inject] public required IBrowserViewportService BrowserViewportService { get; set; }
    [Inject] public required DarkModeCookieService DarkModeCookieService { get; set; }

    // Elevation is vestigial under the frosted-glass design but kept on the parameter
    // surface so MainLayout's <DeepDrftMenu Elevation="..."> call site stays intact.
    [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 bool _mobileMenuOpen;
    private Guid _viewportSubscriptionId;

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

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _viewportSubscriptionId = Guid.NewGuid();
            await BrowserViewportService.SubscribeAsync(
                _viewportSubscriptionId,
                args =>
                {
                    _isDesktop = args.Breakpoint >= Breakpoint.Sm;
                    if (_isDesktop)
                    {
                        _mobileMenuOpen = false;
                    }
                    InvokeAsync(StateHasChanged);
                },
                new ResizeOptions { NotifyOnBreakpointOnly = true },
                fireImmediately: true);
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_viewportSubscriptionId != Guid.Empty)
            await BrowserViewportService.UnsubscribeAsync(_viewportSubscriptionId);
    }

    private string NavClass => IsDarkMode ? "dd-nav dd-nav-dark" : "dd-nav dd-nav-light";

    private string DarkLightModeIconSvg => IsDarkMode ? DDIcons.GasLampLit : DDIcons.GasLamp;

    private async Task DarkModeToggle()
    {
        IsDarkMode = !IsDarkMode;
        await DarkModeCookieService.SetDarkModeAsync(IsDarkMode);
        await IsDarkModeChanged.InvokeAsync(IsDarkMode);
    }

    private void ToggleMobileMenu() => _mobileMenuOpen = !_mobileMenuOpen;

    private void CloseMobileMenu() => _mobileMenuOpen = false;
}