Blazor Web Assembly Collapsible Nav Menu with Sub Menus and JS fix positioning when page width is altered.

Blazor_WebAssembly/Blazor_WebAssembly.Client/Layout/MainLayout.razor

@@ -1,13 +1,13 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
+    <div class="sidebar" style="@IconMenuCssClass">
+        <NavMenu ShowIconMenu="ToggleIconMenu" />
     </div>
 
     <main>
         <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
         </div>
 
         <article class="content px-4">
@@ -16,8 +16,13 @@
     </main>
 </div>
 
-<div id="blazor-error-ui">
-    An unhandled error has occurred.
-    <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
-</div>
+@code
+{
+    private bool IconMenuActive { get; set; } = false;
+    private string? IconMenuCssClass => IconMenuActive ? "width: 80px;" : null;
+
+    protected void ToggleIconMenu(bool iconMenuActive)
+    {
+        IconMenuActive = iconMenuActive;
+    }
+}