feature: Mobile Menu & Style Polish
This commit is contained in:
daniel-c-harvey
@@ -46,8 +46,8 @@
|
||||
/* Minimized floating dock — positioning + hover only; colour from MudFab */
|
||||
.minimized-dock {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
right: 60px;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
z-index: 1300;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
::deep .minimized-dock {
|
||||
.minimized-dock {
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@namespace DeepDrftPublic.Client.Controls
|
||||
|
||||
@if (!RendererInfo.IsInteractive)
|
||||
{
|
||||
<div class="icon-container">
|
||||
@if (!RendererInfo.IsInteractive)
|
||||
{
|
||||
@* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
|
||||
button has no wired click handler, so clicks would vanish. Show a spinner in its place
|
||||
until the component hydrates, at which point it re-renders into the live button. *@
|
||||
@@ -9,13 +9,14 @@
|
||||
Size="Size"
|
||||
Indeterminate="true"
|
||||
Class="mud-icon-button" />
|
||||
}
|
||||
else
|
||||
{
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
<MudIconButton Icon="@Icon"
|
||||
Color="Color"
|
||||
Size="Size"
|
||||
Disabled="@Disabled"
|
||||
OnClick="@OnToggle"
|
||||
Class="xxxx"/>
|
||||
}
|
||||
OnClick="@OnToggle"/>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
::deep .xxxx {
|
||||
background-color: var(--deepdrft-muted)
|
||||
.icon-container {
|
||||
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 {
|
||||
background-color: color-mix(var(--deepdrft-muted), var(--deepdrft-navy));
|
||||
.icon-container:hover {
|
||||
background-color: color-mix(var(--deepdrft-soft), var(--deepdrft-navy-mid) 25%);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
@using DeepDrftPublic.Client.Common
|
||||
@using DeepDrftPublic.Client.Services
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<nav class="@NavClass">
|
||||
@* 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 ▶</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
|
||||
@@ -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";
|
||||
|
||||
@@ -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 = "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
|
||||
new() { Name = "Releases", Route = "/tracks", Icon = Icons.Material.Filled.LibraryMusic },
|
||||
new() { Name = "Sessions", Route = "#", Icon = Icons.Material.Filled.Piano }, // TODO: placeholder until Sessions ships
|
||||
new() { Name = "Mixes", Route = "#", Icon = Icons.Material.Filled.Album }, // TODO: placeholder until Mixes ships
|
||||
];
|
||||
|
||||
public static readonly List<PageRoute> AllPages =
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user