xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace sidebar with responsive app shell

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 13:16:19 +01:00
parent 4f1ef770c7
commit b3c846d1ef
8 changed files with 268 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/RolemasterDb.App/Components/Layout/MainLayout.razor
View File

@@ -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">
@Body
</article>
</main>
</div>
<AppShell>
@Body
</AppShell>
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.

35
src/RolemasterDb.App/Components/Layout/MainLayout.razor.css
View File

@@ -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
View 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
View 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
View 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; }
}

65
src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css Normal file
View File

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

1
src/RolemasterDb.App/Components/_Imports.razor
View File

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