feature: Mobile Menu & Style Polish

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -46,8 +46,8 @@
 /* Minimized floating dock — positioning + hover only; colour from MudFab */
 .minimized-dock {
     position: fixed;
-    bottom: 60px;
+    bottom: 30px;
-    right: 60px;
+    right: 30px;
     z-index: 1300;
 }
 
@@ -56,7 +56,7 @@
 }
 
 @media (max-width: 768px) {
-    ::deep .minimized-dock {
+    .minimized-dock {
         bottom: 15px;
         right: 15px;
     }

DeepDrftPublic.Client/Controls/PlayStateIcon.razor

@@ -1,5 +1,5 @@
 @namespace DeepDrftPublic.Client.Controls
-
+<div class="icon-container">
     @if (!RendererInfo.IsInteractive)
     {
         @* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
@@ -12,10 +12,11 @@
     }
     else
     {
+        
         <MudIconButton Icon="@Icon"
                        Color="Color"
                        Size="Size"
                        Disabled="@Disabled"
-                   OnClick="@OnToggle"
+                       OnClick="@OnToggle"/>
-                   Class="xxxx"/>
     }
+</div>

DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css

@@ -1,7 +1,14 @@
-::deep .xxxx {
+.icon-container {
-    background-color: var(--deepdrft-muted)
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    background-color: var(--deepdrft-soft);
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    transition: background-color 1s ease-in-out;
 }
 
-::deep .xxxx:hover {
+.icon-container:hover {
-    background-color: color-mix(var(--deepdrft-muted), var(--deepdrft-navy));
+    background-color: color-mix(var(--deepdrft-soft), var(--deepdrft-navy-mid) 25%);
 }

DeepDrftPublic.Client/Layout/DeepDrftFooter.razor

@@ -1,9 +1,6 @@
 <footer class="deepdrft-footer">
-    <div class="deepdrft-footer-logo">Deep <span>DRFT</span></div>
+    <div class="deepdrft-footer-logo d-none d-sm-inline">Deep <span>DRFT</span></div>
     <ul class="deepdrft-footer-links">
-        <li><a href="/tracks">Listen</a></li>
-        <li><a href="#">Sessions</a></li>
-        <li><a href="/tracks">Archive</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
     </ul>

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor

@@ -1,12 +1,11 @@
 @using DeepDrftPublic.Client.Common
 @using DeepDrftPublic.Client.Services
-@implements IAsyncDisposable
 
+@* 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"
+            @* <button type="button" *@
-                    class="dd-nav-toggle"
+            @*         class="dd-nav-toggle" *@
-                    aria-label="Toggle dark mode"
+            @*         aria-label="Toggle dark mode" *@
-                    aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
+            @*         aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
-                    @onclick="DarkModeToggle">
+            @*         @onclick="DarkModeToggle"> *@
-                @((MarkupString)DarkLightModeIconSvg)
+            @*     @((MarkupString)DarkLightModeIconSvg) *@
-            </button>
+            @* </button> *@
         </div>
-    }
+    </nav>
-    else
+</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"
+            @* <button type="button" *@
-                    class="dd-nav-toggle"
+            @*         class="dd-nav-toggle" *@
-                    aria-label="Toggle dark mode"
+            @*         aria-label="Toggle dark mode" *@
-                    aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
+            @*         aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
-                    @onclick="DarkModeToggle">
+            @*         @onclick="DarkModeToggle"> *@
-                @((MarkupString)DarkLightModeIconSvg)
+            @*     @((MarkupString)DarkLightModeIconSvg) *@
-            </button>
+            @* </button> *@
             <button type="button"
                     class="dd-nav-hamburger"
                     aria-label="Toggle navigation"
@@ -60,11 +64,10 @@
                 </li>
             </ul>
         }
-    }
     </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
@@ -73,9 +76,7 @@
     [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,28 +92,7 @@
             // 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";

DeepDrftPublic.Client/Layout/Pages.cs

@@ -13,10 +13,9 @@ public static class Pages
 {
     public static readonly List<PageRoute> MenuPages =
     [
-        new() { Name = "Listen",   Route = "/tracks",   Icon = Icons.Material.Filled.LibraryMusic },
+        new() { Name = "Releases",   Route = "/tracks",   Icon = Icons.Material.Filled.LibraryMusic },
-        new() { Name = "Sessions", Route = "#",         Icon = Icons.Material.Filled.Album },          // TODO: placeholder until Sessions ships
+        new() { Name = "Sessions", Route = "#",         Icon = Icons.Material.Filled.Piano },          // TODO: placeholder until Sessions ships
-        new() { Name = "Archive",  Route = "#",         Icon = Icons.Material.Filled.FolderOpen },     // TODO: placeholder until Archive ships
+        new() { Name = "Mixes",  Route = "#",         Icon = Icons.Material.Filled.Album },     // TODO: placeholder until Mixes ships
-        new() { Name = "About",    Route = "#",         Icon = Icons.Material.Filled.Info },           // TODO: placeholder until About ships
     ];
 
     public static readonly List<PageRoute> AllPages = 

DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css

@@ -13,6 +13,7 @@
     --deepdrft-green-accent: #3D7A68;
     --deepdrft-green-interactive: #429d6a;
     --deepdrft-muted: #8A9BB0;
+    --deepdrft-soft: #e3e7ec;
     --deepdrft-white: #FAFAF8;
     --deepdrft-border: rgba(13, 27, 42, 0.10);
     --deepdrft-border-green: rgba(26, 60, 52, 0.20);