deepdrft/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor

@using DeepDrftPublic.Client.Common
@using DeepDrftPublic.Client.Controls
@using DeepDrftPublic.Client.Services

@* Desktop Menu *@
<div class="d-none d-sm-flex">
    <nav class="@NavClass">
        <MudStack Row AlignItems="AlignItems.Center">
            <a class="dd-nav-brand" href="/">
                <MudImage Src="img/deepdrft-logo-l.webp" 
                          Alt="Deep Drft Ornamental Logo Left"
                          Width="24"
                          Height="24 "/>
                
                <span class="mx-2">Deep DRFT</span>
                
                <MudImage Src="img/deepdrft-logo-r.webp" 
                          Alt="Deep Drft Ornamental Logo Right"
                          Width="24"
                          Height="24 "/>
            </a>
        </MudStack>

        <ul class="dd-nav-links">
            @foreach (var navPage in Pages.MenuPages)
            {
                @* Above the medium breakpoint the medium modes ride inline beside their parent:
                   the parent link renders, then each child renders as its own sibling appbar link.
                   No popover — so the 8.J stuck-open dismissal applies only to the mobile drawer
                   below, where clicks close the menu. *@
                <li>
                    <a href="@navPage.Route" class="dd-nav-link">@navPage.Name</a>
                </li>
                @foreach (var child in navPage.Children)
                {
                    <li>
                        <a href="@child.Route" class="dd-nav-link">@child.Name</a>
                    </li>
                }
            }
        </ul>

        <div class="dd-nav-actions">
            <StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now &#9654;"/>
            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
        </div>
    </nav>
</div>

@* Mobile Menu *@
<div class="d-flex d-sm-none">
    <nav class="@NavClass">
        <MudStack Row AlignItems="AlignItems.Center">
            <a class="dd-nav-brand" href="/">
                <MudImage Src="img/deepdrft-logo-l.webp" 
                          Alt="Deep Drft Ornamental Logo Left"
                          Width="24"
                          Height="24 "/>
                
                <span class="mx-2">Deep DRFT</span>
                
                <MudImage Src="img/deepdrft-logo-r.webp" 
                          Alt="Deep Drft Ornamental Logo Right"
                          Width="24"
                          Height="24 "/>
            </a>
        </MudStack>
        
        <div class="dd-nav-actions">
            <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>
            
            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
        </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>
                    @* One-level fan-out: render children as an indented sub-list under the parent link. *@
                    @foreach (var child in navPage.Children)
                    {
                        <li class="dd-nav-mobile-child">
                            <a href="@child.Route" class="dd-nav-link" @onclick="CloseMobileMenu">@child.Name</a>
                        </li>
                    }
                }
                <li>
                    <StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now &#9654;" OnStreamStarted="CloseMobileMenu" />
                </li>
            </ul>
        }
    </nav>
</div>

@code {
    [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 _mobileMenuOpen;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Runs here (not OnInitializedAsync) because OnAfterRenderAsync(firstRender)
            // is guaranteed not to execute during any SSR prerender pass. During prerender
            // (now interactive across all of Routes), awaiting IsDarkModeChanged.InvokeAsync
            // triggers a parent re-render cycle that cannot complete on the prerender renderer
            // and hangs the response. Server-side DarkModeService has already seeded
            // DarkModeSettings via PersistentComponentState, so the prerender paint is
            // already correct; this call reads that persisted value and propagates it to the
            // parent so the menu's IsDarkMode parameter stays consistent with DarkModeSettings.
            IsDarkMode = DarkModeCookieService.GetDarkMode();
            await IsDarkModeChanged.InvokeAsync(IsDarkMode);
        }
    }

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

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

    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);
    }

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

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