daniel-c-harvey
113 lines
4.4 KiB
Plaintext
113 lines
4.4 KiB
Plaintext
@using DeepDrftPublic.Client.Common
|
|
@using DeepDrftPublic.Client.Services
|
|
|
|
@* Desktop Menu *@
|
|
<div class="d-none d-sm-flex">
|
|
<nav class="@NavClass">
|
|
<a class="dd-nav-brand" href="/">Deep DRFT</a>
|
|
|
|
<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 ▶</a>
|
|
@* <button type="button" *@
|
|
@* class="dd-nav-toggle" *@
|
|
@* aria-label="Toggle dark mode" *@
|
|
@* aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
|
|
@* @onclick="DarkModeToggle"> *@
|
|
@* @((MarkupString)DarkLightModeIconSvg) *@
|
|
@* </button> *@
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
@* Mobile Menu *@
|
|
<div class="d-flex d-sm-none">
|
|
<nav class="@NavClass">
|
|
<a class="dd-nav-brand" href="/">Deep DRFT</a>
|
|
|
|
<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 ▶</a>
|
|
</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 async Task DarkModeToggle()
|
|
{
|
|
IsDarkMode = !IsDarkMode;
|
|
await DarkModeCookieService.SetDarkModeAsync(IsDarkMode);
|
|
await IsDarkModeChanged.InvokeAsync(IsDarkMode);
|
|
}
|
|
|
|
private void ToggleMobileMenu() => _mobileMenuOpen = !_mobileMenuOpen;
|
|
|
|
private void CloseMobileMenu() => _mobileMenuOpen = false;
|
|
}
|