Implemented navigation shelf with nav draweer button

ShopAdmin/Components/Layout/MainLayout.razor

@@ -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();
+    }
+}

ShopAdmin/Components/Pages/NavShelf.razor

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

ShopAdmin/Components/Pages/NavShelf.razor.css

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

ShopAdmin/Components/_Imports.razor

@@ -9,3 +9,4 @@
 @using ShopAdmin
 @using ShopAdmin.Components
 @using ShopAdmin.Components.Layout
+@using ShopAdmin.Components.Pages

ShopAdmin/wwwroot/app.css

@@ -1,10 +1,21 @@
 /* --- 1. Variables & Global Reset --- */
 :root {
-    --bar-bg: #001219;
+    /* --- BRAND CORES --- */
-    --text-white: #ffffff;
     --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 --- */