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

DeepDrftWeb.Client/Layout/DeepDrftMenu.razor

@@ -1,78 +1,80 @@
-@using DeepDrftWeb.Client.Controls
+@using DeepDrftWeb.Client.Common
 @using DeepDrftWeb.Client.Services
+@implements IAsyncDisposable
+
+<nav class="@NavClass">
+    <a class="dd-nav-brand" href="/">Deep DRFT</a>
 
-<MudAppBar Elevation="@Elevation">
-    <div class="d-inline-flex align-center flex-1 justify-space-between">
     @if (_isDesktop)
     {
-            <div>
+        <ul class="dd-nav-links">
-                <MudStack Row AlignItems="AlignItems.Center" Spacing="6">
+            @foreach (var navPage in Pages.MenuPages)
-                    <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>
+                <li>
+                    <a href="@navPage.Route" class="dd-nav-link">@navPage.Name</a>
+                </li>
             }
-                </MudStack>
+        </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>
+        <div class="dd-nav-actions">
-                <MudStack Row AlignItems="AlignItems.Center">
+            <button type="button"
-                    <MudMenu RelativeWidth="DropdownWidth.Adaptive">
+                    class="dd-nav-toggle"
-                        <ActivatorContent>
+                    aria-label="Toggle dark mode"
-                            <MudStack Row AlignItems="AlignItems.Center" Spacing="4">
+                    aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
-                                <MudIcon Icon="@Icons.Material.Filled.Menu"/>
+                    @onclick="DarkModeToggle">
-                                <MudAvatar Class="mr-2">
+                @((MarkupString)DarkLightModeIconSvg)
-                                    <MudImage Src="img/deepdrft-logo.jpg"></MudImage>
+            </button>
-                                </MudAvatar>
+            <button type="button"
-                                <div>Deep DRFT</div>
+                    class="dd-nav-hamburger"
-                            </MudStack>
+                    aria-label="Toggle navigation"
-                        </ActivatorContent>
+                    aria-expanded="@_mobileMenuOpen.ToString().ToLowerInvariant()"
-                        <ChildContent>
+                    @onclick="ToggleMobileMenu">
-                            @foreach (PageRoute route in Pages.AllPages)
+                <span></span><span></span><span></span>
-                            {
+            </button>
-                                <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>
+        @if (_mobileMenuOpen)
-            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
+        {
-        </div>
+            <ul class="dd-nav-links dd-nav-links-mobile">
-    </div>
+                @foreach (var navPage in Pages.MenuPages)
-</MudAppBar>
+                {
+                    <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,29 +87,32 @@
     {
         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,
+        if (_viewportSubscriptionId != Guid.Empty)
-        false => DDIcons.GasLamp,
+            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()
     {
@@ -115,4 +120,8 @@
         await DarkModeCookieService.SetDarkModeAsync(IsDarkMode);
         await IsDarkModeChanged.InvokeAsync(IsDarkMode);
     }
+
+    private void ToggleMobileMenu() => _mobileMenuOpen = !_mobileMenuOpen;
+
+    private void CloseMobileMenu() => _mobileMenuOpen = false;
 }

DeepDrftWeb.Client/Layout/DeepDrftMenu.razor.css

@@ -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

@@ -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 =