refactor(split): rename DeepDrftWeb -> DeepDrftPublic and DeepDrftWeb.Client -> DeepDrftPublic.Client (Phase 4)
This commit is contained in:
Daniel Harvey
@@ -0,0 +1,127 @@
|
||||
@using DeepDrftPublic.Client.Common
|
||||
@using DeepDrftPublic.Client.Services
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<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 ▶</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 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 ▶</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()
|
||||
{
|
||||
IsDarkMode = DarkModeCookieService.GetDarkModeAsync();
|
||||
await IsDarkModeChanged.InvokeAsync(IsDarkMode);
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
_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;
|
||||
|
||||
private async Task DarkModeToggle()
|
||||
{
|
||||
IsDarkMode = !IsDarkMode;
|
||||
await DarkModeCookieService.SetDarkModeAsync(IsDarkMode);
|
||||
await IsDarkModeChanged.InvokeAsync(IsDarkMode);
|
||||
}
|
||||
|
||||
private void ToggleMobileMenu() => _mobileMenuOpen = !_mobileMenuOpen;
|
||||
|
||||
private void CloseMobileMenu() => _mobileMenuOpen = false;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
@using DeepDrftPublic.Client.Controls
|
||||
@using DeepDrftPublic.Client.Controls.AudioPlayerBar
|
||||
@using DeepDrftPublic.Client.Services
|
||||
@using DeepDrftPublic.Client.Common
|
||||
@using DeepDrftShared.Client.Common
|
||||
@using Microsoft.AspNetCore.Components
|
||||
@inherits LayoutComponentBase
|
||||
@implements IDisposable
|
||||
|
||||
<MudThemeProvider Theme="@_themeManager.Theme" IsDarkMode="_isDarkMode" />
|
||||
<MudPopoverProvider />
|
||||
<MudDialogProvider />
|
||||
<MudSnackbarProvider />
|
||||
<div class="@ThemeWrapperClass">
|
||||
<MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
|
||||
<AudioPlayerProvider>
|
||||
<DeepDrftMenu Elevation="_themeManager.AppBarElevation" @bind-IsDarkMode="_isDarkMode" />
|
||||
<MudMainContent Class="flex-grow-1 pt-16 pb-8">
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
|
||||
@Body
|
||||
</MudContainer>
|
||||
<AudioPlayerBar />
|
||||
</MudMainContent>
|
||||
<footer class="deepdrft-footer">
|
||||
<div class="deepdrft-footer-logo">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>
|
||||
<div class="deepdrft-footer-copy">© 2026 Deep DRFT — Charleston, SC</div>
|
||||
</footer>
|
||||
</AudioPlayerProvider>
|
||||
</MudLayout>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
<a href="." class="reload">Reload</a>
|
||||
<span class="dismiss">🗙</span>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private const string DarkModeKey = "darkMode";
|
||||
private bool _isDarkMode = true;
|
||||
private PersistingComponentStateSubscription _persistingSubscription;
|
||||
|
||||
[Inject] public required PersistentComponentState PersistentState { get; set; }
|
||||
[Inject] public required DarkModeSettings DarkModeSettings { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
// Restore persisted dark mode state (from server prerender)
|
||||
if (PersistentState.TryTakeFromJson<bool>(DarkModeKey, out var restored))
|
||||
{
|
||||
_isDarkMode = restored;
|
||||
DarkModeSettings.IsDarkMode = restored;
|
||||
}
|
||||
else
|
||||
{
|
||||
_isDarkMode = DarkModeSettings.IsDarkMode;
|
||||
}
|
||||
|
||||
// Register to persist state when prerendering completes
|
||||
_persistingSubscription = PersistentState.RegisterOnPersisting(PersistDarkMode);
|
||||
|
||||
// Palettes + typography live in DeepDrftShared.Client.Common.DeepDrftPalettes
|
||||
// so the CMS host can reuse them. We wrap into ThemeManagerTheme to keep
|
||||
// the MudBlazor.ThemeManager integration intact.
|
||||
_themeManager = new ThemeManagerTheme
|
||||
{
|
||||
Theme = DeepDrftPalettes.Default,
|
||||
};
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private ThemeManagerTheme _themeManager;
|
||||
public bool _themeManagerOpen = false;
|
||||
|
||||
void OpenThemeManager(bool value)
|
||||
{
|
||||
_themeManagerOpen = value;
|
||||
}
|
||||
|
||||
void UpdateTheme(ThemeManagerTheme value)
|
||||
{
|
||||
_themeManager = value;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
// Theme wrapper class for CSS targeting
|
||||
private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
|
||||
|
||||
private Task PersistDarkMode()
|
||||
{
|
||||
PersistentState.PersistAsJson(DarkModeKey, _isDarkMode);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_persistingSubscription.Dispose();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
#blazor-error-ui {
|
||||
color-scheme: light only;
|
||||
background: lightyellow;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── SITE FOOTER ── */
|
||||
.deepdrft-footer {
|
||||
background: var(--deepdrft-white);
|
||||
border-top: 1px solid var(--deepdrft-border);
|
||||
padding: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.deepdrft-footer-logo {
|
||||
font-family: var(--deepdrft-font-display);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
color: var(--deepdrft-navy);
|
||||
}
|
||||
|
||||
.deepdrft-footer-logo span {
|
||||
font-style: italic;
|
||||
color: var(--deepdrft-green);
|
||||
}
|
||||
|
||||
.deepdrft-footer-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.deepdrft-footer-links a {
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--deepdrft-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.deepdrft-footer-links a:hover { color: var(--deepdrft-navy); }
|
||||
|
||||
.deepdrft-footer-copy {
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--deepdrft-muted);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@using DeepDrftPublic.Client.Controls
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
using MudBlazor;
|
||||
|
||||
namespace DeepDrftPublic.Client.Layout;
|
||||
|
||||
public class PageRoute
|
||||
{
|
||||
public string Name { get; set; } = string.Empty;
|
||||
public string Route { get; set; } = string.Empty;
|
||||
public string? Icon { get; set; } = null;
|
||||
}
|
||||
|
||||
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
|
||||
];
|
||||
|
||||
public static readonly List<PageRoute> AllPages =
|
||||
new List<PageRoute>
|
||||
{
|
||||
new() { Name = "Home", Route = "/", Icon = Icons.Material.Filled.Home }
|
||||
}.Concat(MenuPages).ToList();
|
||||
}
|
||||
Reference in New Issue
Block a user