Replace sidebar with responsive app shell
This commit is contained in:
@@ -42,6 +42,7 @@ It is intentionally implementation-focused:
|
||||
| 2026-03-21 | P1.2 | Completed | Switched the app to Fraunces, IBM Plex Sans, and IBM Plex Mono with distinct display, body, UI, and code font roles instead of one shared heading font. |
|
||||
| 2026-03-21 | P1.3 | Completed | Added explicit light, dark, and system theme modes in the token layer and introduced a scoped `ThemeState` service for later shell controls. |
|
||||
| 2026-03-21 | P1.4 | Completed | Added shared browser-storage wrappers, persisted theme mode in `localStorage`, and initialize/apply theme state from the layout on interactive render. |
|
||||
| 2026-03-21 | P1.5 | Completed | Replaced the permanent sidebar layout with a sticky top app shell and mobile bottom navigation backed by dedicated shell components. |
|
||||
|
||||
### Lessons Learned
|
||||
|
||||
@@ -53,6 +54,7 @@ It is intentionally implementation-focused:
|
||||
- The old typography setup coupled display and utility text under a single token. The new shell work needs separate display and UI font roles to avoid decorative type in controls.
|
||||
- Theme mode selection can be prepared independently of persistence. Splitting those concerns keeps the theme CSS and the storage wiring reviewable.
|
||||
- Shared UI state events in Blazor should stay synchronous unless the event contract is async-aware. Layout refresh can be triggered safely with `InvokeAsync(StateHasChanged)` from a synchronous handler.
|
||||
- Extracting shell markup into dedicated components is lower-risk than continuing to evolve `MainLayout.razor` directly. It isolates responsive frame work from page content and keeps later nav changes localized.
|
||||
|
||||
## Target Outcomes
|
||||
|
||||
@@ -258,7 +260,7 @@ Create the implementation foundation so the visual overhaul does not start with
|
||||
| `P1.2` | Completed | Font loading now uses Fraunces, IBM Plex Sans, and IBM Plex Mono with explicit role-based tokens. |
|
||||
| `P1.3` | Completed | Explicit light, dark, and system modes now exist in CSS, backed by a scoped `ThemeState` service. |
|
||||
| `P1.4` | Completed | Theme mode now persists through a shared storage service and is applied from the layout during interactive startup. |
|
||||
| `P1.5` | Pending | Shell replacement follows once tokens and theme plumbing exist. |
|
||||
| `P1.5` | Completed | The sidebar is gone; pages now render inside a sticky top-shell with a mobile bottom nav. |
|
||||
| `P1.6` | Pending | Shell slots and nav utilities depend on the new shell. |
|
||||
| `P1.7` | Pending | Skip link and landmark work will land with the shell markup. |
|
||||
| `P1.8` | Pending | Tools-specific shell emphasis is final Phase 1 polish. |
|
||||
|
||||
@@ -2,17 +2,9 @@
|
||||
@implements IDisposable
|
||||
@inject RolemasterDb.App.Frontend.AppState.ThemeState ThemeState
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<article class="content-shell">
|
||||
<AppShell>
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</AppShell>
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
|
||||
@@ -1,38 +1,3 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(196, 167, 107, 0.28), transparent 35%),
|
||||
linear-gradient(180deg, #24130d 0%, #3c2415 46%, #130d0b 100%);
|
||||
border-right: 1px solid rgba(196, 167, 107, 0.2);
|
||||
}
|
||||
|
||||
.content-shell {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 290px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
color-scheme: light only;
|
||||
background: #682e24;
|
||||
|
||||
41
src/RolemasterDb.App/Components/Shell/AppShell.razor
Normal file
41
src/RolemasterDb.App/Components/Shell/AppShell.razor
Normal file
@@ -0,0 +1,41 @@
|
||||
<div class="app-shell">
|
||||
<header class="app-shell-header">
|
||||
<div class="app-shell-bar">
|
||||
<div class="app-shell-brand-block">
|
||||
<a class="app-shell-brand" href="/">
|
||||
<span class="app-shell-brand-mark">RM</span>
|
||||
<span class="app-shell-brand-copy">
|
||||
<strong>Rolemaster DB</strong>
|
||||
<span>Reference and lookup workspace</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="app-shell-header-nav">
|
||||
<ShellPrimaryNav />
|
||||
</div>
|
||||
|
||||
<div class="app-shell-header-actions">
|
||||
@HeaderActions
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="app-main" class="app-shell-main">
|
||||
<div class="content-shell">
|
||||
@ChildContent
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<nav class="app-shell-mobile-nav" aria-label="Primary">
|
||||
<ShellPrimaryNav IsBottomNav="true" />
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? HeaderActions { get; set; }
|
||||
}
|
||||
133
src/RolemasterDb.App/Components/Shell/AppShell.razor.css
Normal file
133
src/RolemasterDb.App/Components/Shell/AppShell.razor.css
Normal file
@@ -0,0 +1,133 @@
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-shell-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
padding: 0.9rem 1rem 0;
|
||||
}
|
||||
|
||||
.app-shell-bar {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: 24px;
|
||||
background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
|
||||
box-shadow: var(--shadow-1);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.app-shell-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-shell-brand:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.app-shell-brand-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(145deg, var(--accent-3), var(--accent-5));
|
||||
color: var(--text-on-accent);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.app-shell-brand-copy {
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.app-shell-brand-copy strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.app-shell-brand-copy span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.app-shell-header-nav {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-shell-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
.app-shell-main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding: 1rem 0 5.75rem;
|
||||
}
|
||||
|
||||
.content-shell {
|
||||
width: min(1600px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-shell-mobile-nav {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 35;
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.app-shell-header {
|
||||
padding: 0.65rem 0.75rem 0;
|
||||
}
|
||||
|
||||
.app-shell-bar {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.75rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
}
|
||||
|
||||
.app-shell-brand-copy span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-shell-header-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.app-shell-main {
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.app-shell-mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
22
src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor
Normal file
22
src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="shell-primary-nav @(IsBottomNav ? "is-bottom-nav" : "is-top-nav")">
|
||||
<NavLink class="shell-primary-nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="shell-primary-nav-label">Lookup Desk</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shell-primary-nav-link" href="tables">
|
||||
<span class="shell-primary-nav-label">Critical Tables</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shell-primary-nav-link" href="api">
|
||||
<span class="shell-primary-nav-label">API Surface</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shell-primary-nav-link" href="diagnostics">
|
||||
<span class="shell-primary-nav-label">Diagnostics</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public bool IsBottomNav { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.shell-primary-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.shell-primary-nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 0.95rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
|
||||
}
|
||||
|
||||
.shell-primary-nav-link:hover {
|
||||
color: var(--text-primary);
|
||||
background: color-mix(in srgb, var(--surface-2) 84%, transparent);
|
||||
border-color: var(--border-subtle);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.shell-primary-nav-link.active {
|
||||
color: var(--text-primary);
|
||||
background: color-mix(in srgb, var(--accent-1) 84%, var(--surface-2));
|
||||
border-color: color-mix(in srgb, var(--accent-3) 45%, var(--border-default));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.shell-primary-nav-label {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shell-primary-nav.is-bottom-nav {
|
||||
justify-content: space-between;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: 24px;
|
||||
background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
|
||||
box-shadow: var(--shadow-1);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.shell-primary-nav.is-bottom-nav .shell-primary-nav-link {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding-inline: 0.45rem;
|
||||
}
|
||||
|
||||
.shell-primary-nav.is-bottom-nav .shell-primary-nav-label {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.shell-primary-nav.is-top-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -11,4 +11,5 @@
|
||||
@using RolemasterDb.App
|
||||
@using RolemasterDb.App.Components
|
||||
@using RolemasterDb.App.Components.Layout
|
||||
@using RolemasterDb.App.Components.Shell
|
||||
@using RolemasterDb.App.Components.Shared
|
||||
|
||||
Reference in New Issue
Block a user