Implemented navigation shelf with nav draweer button

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