daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feature: Mobile Menu & Style Polish

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-07 06:53:21 -04:00
parent 84a302ce24
commit 13adb144a6
7 changed files with 69 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
+29 -49
View File
@@ -1,12 +1,11 @@
@using DeepDrftPublic.Client.Common
@using DeepDrftPublic.Client.Services
@implements IAsyncDisposable
<nav class="@NavClass">
<a class="dd-nav-brand" href="/">Deep DRFT</a>
@* Desktop Menu *@
<div class="d-none d-sm-flex">
<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)
{
@@ -18,25 +17,30 @@
<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>
@* <button type="button" *@
@* class="dd-nav-toggle" *@
@* aria-label="Toggle dark mode" *@
@* aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
@* @onclick="DarkModeToggle"> *@
@* @((MarkupString)DarkLightModeIconSvg) *@
@* </button> *@
</div>
}
else
{
</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-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"
@@ -60,11 +64,10 @@
</li>
</ul>
}
}
</nav>
</nav>
</div>
@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
@@ -72,10 +75,8 @@
[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 OnAfterRenderAsync(bool firstRender)
{
@@ -91,30 +92,9 @@
// parent so the menu's IsDarkMode parameter stays consistent with DarkModeSettings.
IsDarkMode = DarkModeCookieService.GetDarkMode();
await IsDarkModeChanged.InvokeAsync(IsDarkMode);
_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;