Implemented navigation shelf with nav draweer button

ShopAdmin/Components/Layout/MainLayout.razor

@@ -9,7 +9,7 @@
             <circle cx="75" cy="80" r="5" fill="#4dabff" opacity="0.6" />
             <circle cx="75" cy="20" r="5" fill="#4dabff" opacity="0.6" />
         </svg>
-
+            
         <div class="text-column">
             <span class="brand-main">Lite<span class="brand-accent">Charms</span></span>
             <span class="payoff-line">Shop Admin Console</span>
@@ -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 />
+<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();
+    }
+}