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

Merge p0-w2-ta-nav: frosted-glass fixed nav

Browse Source
This commit is contained in:
Daniel Harvey
2026-05-17 22:01:45 -04:00
parent 531e870f02 2eb8e02f15
commit cd7f75dd15
3 changed files with 308 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb.Client/Layout/DeepDrftMenu.razor
+84 -75
View File
@@ -1,78 +1,80 @@
@using DeepDrftWeb.Client.Controls
@using DeepDrftWeb.Client.Common
@using DeepDrftWeb.Client.Services
@implements IAsyncDisposable
<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"/>
<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>
</div>
</MudAppBar>
}
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()
@@ -85,34 +87,41 @@
{
if (firstRender)
{
var breakpoint = await BrowserViewportService.GetCurrentBreakpointAsync();
_isDesktop = breakpoint >= Breakpoint.Sm;
_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);
StateHasChanged();
}
}
private string DarkLightModeButtonIcon => IsDarkMode switch
public async ValueTask DisposeAsync()
{
true => DDIcons.GasLampLit,
false => DDIcons.GasLamp,
};
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;
}
DeepDrftWeb.Client/Layout/DeepDrftMenu.razor.css
+220
View File
@@ -0,0 +1,220 @@
/* Frosted-glass top navigation.
Scoped to DeepDrftMenu.razor only — global styles live in deepdrft-styles.css.
The CSS variables consumed here (--deepdrft-navy etc.) are theme-aware and
defined globally; the dd-nav-dark modifier overrides the backdrop RGBA since
it must be hard-coded for the blur fallback. */
.dd-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1.5rem 3rem;
border-bottom: 1px solid var(--deepdrft-border);
box-shadow: none;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.dd-nav-light {
background: rgba(250, 250, 248, 0.88);
}
.dd-nav-dark {
background: rgba(13, 13, 18, 0.85);
}
/* Brand */
.dd-nav-brand {
font-family: var(--deepdrft-font-mono);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--deepdrft-navy);
text-decoration: none;
white-space: nowrap;
}
.dd-nav-dark .dd-nav-brand {
color: var(--deepdrft-white);
}
/* Centred link list */
.dd-nav-links {
display: flex;
align-items: center;
gap: 2.5rem;
flex: 1;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.dd-nav-link {
font-family: var(--deepdrft-font-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--deepdrft-muted);
text-decoration: none;
transition: color 0.25s ease;
}
.dd-nav-link:hover,
.dd-nav-link:focus-visible {
color: var(--deepdrft-navy);
}
.dd-nav-dark .dd-nav-link:hover,
.dd-nav-dark .dd-nav-link:focus-visible {
color: var(--deepdrft-white);
}
/* Right-side cluster */
.dd-nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
/* Stream Now CTA — square pill, navy on warm white */
.dd-nav-cta {
display: inline-block;
font-family: var(--deepdrft-font-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--deepdrft-white);
background: var(--deepdrft-navy);
padding: 0.6rem 1.4rem;
border: none;
border-radius: 0;
text-decoration: none;
cursor: pointer;
transition: background 0.25s ease;
}
.dd-nav-cta:hover,
.dd-nav-cta:focus-visible {
background: var(--deepdrft-green);
}
.dd-nav-dark .dd-nav-cta {
color: var(--deepdrft-white);
background: var(--deepdrft-primary);
}
.dd-nav-dark .dd-nav-cta:hover,
.dd-nav-dark .dd-nav-cta:focus-visible {
background: var(--deepdrft-senary);
}
/* Dark-mode toggle (gas lamp) */
.dd-nav-toggle {
width: 2rem;
height: 2rem;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
color: var(--deepdrft-navy);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.25s ease;
}
.dd-nav-toggle:hover,
.dd-nav-toggle:focus-visible {
color: var(--deepdrft-green-accent);
}
.dd-nav-toggle::deep svg {
width: 1.25rem;
height: 1.25rem;
}
.dd-nav-dark .dd-nav-toggle {
color: var(--deepdrft-white);
}
.dd-nav-dark .dd-nav-toggle:hover,
.dd-nav-dark .dd-nav-toggle:focus-visible {
color: var(--deepdrft-tertiary);
}
/* Mobile hamburger */
.dd-nav-hamburger {
width: 2rem;
height: 2rem;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
}
.dd-nav-hamburger span {
display: block;
width: 1.25rem;
height: 1.5px;
background: var(--deepdrft-navy);
}
.dd-nav-dark .dd-nav-hamburger span {
background: var(--deepdrft-white);
}
/* Mobile dropdown panel — absolute-positioned beneath the bar */
.dd-nav-links-mobile {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0.75rem 1.5rem 1.25rem;
background: rgba(250, 250, 248, 0.96);
border-bottom: 1px solid var(--deepdrft-border);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.dd-nav-dark .dd-nav-links-mobile {
background: rgba(13, 13, 18, 0.95);
}
.dd-nav-links-mobile li {
padding: 0.6rem 0;
}
.dd-nav-links-mobile .dd-nav-cta {
margin-top: 0.5rem;
text-align: center;
}
/* Mobile padding — give the nav room to breathe without crowding */
@media (max-width: 599px) {
.dd-nav {
padding: 1rem 1.25rem;
}
}
DeepDrftWeb.Client/Layout/Pages.cs
+4 -1
View File
@@ -13,7 +13,10 @@ public static class Pages
{
public static readonly List<PageRoute> MenuPages =
[
new() { Name = "Track Gallery", Route = "/tracks", Icon = Icons.Material.Filled.LibraryMusic }
new() { Name = "Listen", Route = "/tracks", Icon = Icons.Material.Filled.LibraryMusic },
new() { Name = "Sessions", Route = "#", Icon = Icons.Material.Filled.Album }, // TODO: placeholder until Sessions ships
new() { Name = "Archive", Route = "#", Icon = Icons.Material.Filled.FolderOpen }, // TODO: placeholder until Archive ships
new() { Name = "About", Route = "#", Icon = Icons.Material.Filled.Info }, // TODO: placeholder until About ships
];
public static readonly List<PageRoute> AllPages =