Implemented navigation shelf with nav draweer button
This commit is contained in:
Khwezi Mngoma
@@ -17,10 +17,25 @@
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<NavShelf IsOpen="isShelfExpanded" IsOpenChanged="OnShelfStateChanged" @rendermode="InteractiveServer" />
|
||||
|
||||
<div class="page-wrapper @(isShelfExpanded ? "shifted-canvas" : "")">
|
||||
<main>
|
||||
@Body
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<BlazoredToasts />
|
||||
|
||||
@code {
|
||||
private bool isShelfExpanded { get; set; } = false;
|
||||
|
||||
private void OnShelfStateChanged(bool newState)
|
||||
{
|
||||
isShelfExpanded = newState;
|
||||
|
||||
// This forces Blazor to re-evaluate the DOM, instantly applying
|
||||
// the "shelf-open" and "shifted-canvas" CSS utility classes.
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
@inject NavigationManager NavManager
|
||||
|
||||
<button class="shelf-grip @(IsOpen ? "grip-open" : "")"
|
||||
@onclick="ToggleShelf"
|
||||
aria-label="Toggle Navigation Shelf">
|
||||
<div class="grip-icon">
|
||||
@if (IsOpen)
|
||||
{
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</svg>
|
||||
}
|
||||
else
|
||||
{
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="shelf-backdrop @(IsOpen ? "backdrop-active" : "")" @onclick="CloseShelf"></div>
|
||||
|
||||
<aside class="nav-shelf-panel @(IsOpen ? "shelf-open" : "")">
|
||||
<div class="shelf-header">
|
||||
<h3>System Context</h3>
|
||||
<span class="environment-badge">PROD_PLANE</span>
|
||||
</div>
|
||||
|
||||
<nav class="shelf-navigation">
|
||||
<NavLink class="shelf-link" href="" Match="NavLinkMatch.All" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg>
|
||||
<span>Dashboard</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shelf-link" href="packages" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l-7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
|
||||
<span>Product Packages</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shelf-link" href="prices" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="12" x2="12" y2="12.01"></line><path d="M20.42 4.58a10 10 0 1 1-14.84 0"></path></svg>
|
||||
<span>Price Matrix</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shelf-link" href="orders" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
<span>Order Pipelines</span>
|
||||
</NavLink>
|
||||
|
||||
<div class="shelf-divider"></div>
|
||||
|
||||
<NavLink class="shelf-link" href="scheduler" @onclick="CloseShelf">
|
||||
<svg class="link-icon icon-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
||||
<span>Quartz Workloads</span>
|
||||
</NavLink>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@code {
|
||||
[Parameter] public bool IsOpen { get; set; } = false;
|
||||
[Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
|
||||
|
||||
private async Task ToggleShelf()
|
||||
{
|
||||
IsOpen = !IsOpen;
|
||||
await IsOpenChanged.InvokeAsync(IsOpen);
|
||||
}
|
||||
|
||||
private async Task CloseShelf()
|
||||
{
|
||||
if (IsOpen)
|
||||
{
|
||||
IsOpen = false;
|
||||
await IsOpenChanged.InvokeAsync(IsOpen);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
/* --- 1. The Flyout Side Panel --- */
|
||||
.nav-shelf-panel {
|
||||
position: fixed;
|
||||
top: var(--header-height); /* Drops clean below your top-bar */
|
||||
right: -300px; /* Hidden by default */
|
||||
width: 300px;
|
||||
height: calc(100vh - var(--header-height));
|
||||
background-color: var(--shelf-bg);
|
||||
border-left: 1px solid rgba(144, 224, 239, 0.15);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.nav-shelf-panel.shelf-open {
|
||||
right: 0; /* Animate into viewport */
|
||||
}
|
||||
|
||||
/* --- 2. The Floating Mechanical Grip Handle --- */
|
||||
.shelf-grip {
|
||||
position: fixed;
|
||||
top: calc(var(--header-height) + 24px);
|
||||
right: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-color: var(--shelf-bg);
|
||||
border: 1px solid var(--border-mid-opacity);
|
||||
border-right: none;
|
||||
border-radius: 8px 0 0 8px;
|
||||
color: var(--payoff-color);
|
||||
cursor: pointer;
|
||||
z-index: 2001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Moves out dynamically alongside the shelf edge when open */
|
||||
.shelf-grip.grip-open {
|
||||
right: 300px;
|
||||
background-color: var(--shelf-bg);
|
||||
border-color: var(--border-low-opacity);
|
||||
}
|
||||
|
||||
.shelf-grip:hover {
|
||||
background-color: #112930;
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
.grip-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* --- 3. Panel Internal Layout & Links --- */
|
||||
.shelf-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(144, 224, 239, 0.1);
|
||||
}
|
||||
|
||||
.shelf-header h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-white);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.environment-badge {
|
||||
font-size: 0.65rem;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
background: rgba(0, 150, 199, 0.15);
|
||||
border: 1px solid rgba(0, 150, 199, 0.4);
|
||||
color: var(--payoff-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.shelf-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Deep selection matching Blazor's active class matching system */
|
||||
::deep .shelf-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
text-decoration: none;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
::deep .shelf-link:hover {
|
||||
background-color: rgba(0, 150, 199, 0.08);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
::deep .shelf-link.active {
|
||||
background-color: var(--brand-blue);
|
||||
color: var(--text-white);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.icon-warn {
|
||||
color: var(--payoff-color);
|
||||
}
|
||||
|
||||
.shelf-divider {
|
||||
height: 1px;
|
||||
background: rgba(144, 224, 239, 0.1);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* --- 4. Content Blur/Backdrop Overlay --- */
|
||||
.shelf-backdrop {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: calc(100vh - var(--header-height));
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(0px);
|
||||
z-index: 1999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
|
||||
}
|
||||
|
||||
.shelf-backdrop.backdrop-active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
@@ -9,3 +9,4 @@
|
||||
@using ShopAdmin
|
||||
@using ShopAdmin.Components
|
||||
@using ShopAdmin.Components.Layout
|
||||
@using ShopAdmin.Components.Pages
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
/* --- 1. Variables & Global Reset --- */
|
||||
:root {
|
||||
--bar-bg: #001219;
|
||||
--text-white: #ffffff;
|
||||
/* --- BRAND CORES --- */
|
||||
--brand-blue: #0096c7;
|
||||
--hover-blue: #00b4d8;
|
||||
--hover-blue: #4dabff;
|
||||
/* --- NEW CANVAS BALANCE --- */
|
||||
/* Lighter, slate-tinted midnight for the main workspace body */
|
||||
--body-bg: #0b1519;
|
||||
/* Deep obsidian for the fixed navigation anchors */
|
||||
--bar-bg: #03090b;
|
||||
/* The NavShelf background: sits right between the bar and body */
|
||||
--shelf-bg: #070e10;
|
||||
/* --- TYPOGRAPHY & LINES --- */
|
||||
--text-white: #f8f9fa;
|
||||
/* Soft cyan-gray tone for secondary text and structural borders */
|
||||
--payoff-color: #90e0ef;
|
||||
--border-low-opacity: rgba(144, 224, 239, 0.08);
|
||||
--border-mid-opacity: rgba(144, 224, 239, 0.18);
|
||||
--header-height: 92px;
|
||||
}
|
||||
|
||||
@@ -31,7 +42,7 @@ html, body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4rem;
|
||||
padding: 0 4rem 0 1rem;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid rgba(144, 224, 239, 0.15);
|
||||
}
|
||||
@@ -93,6 +104,8 @@ html, body {
|
||||
padding-top: var(--header-height);
|
||||
box-sizing: border-box;
|
||||
background-color: var(--bar-bg);
|
||||
position: relative;
|
||||
transition: padding-right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
main {
|
||||
@@ -100,6 +113,7 @@ main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background-color: var(--body-bg) !important;
|
||||
}
|
||||
|
||||
/* --- Responsive Logic --- */
|
||||
|
||||
Reference in New Issue
Block a user