UPdate comportamento compress menù laterale sx

MP.SPEC/Shared/MainLayout.razor

@@ -3,13 +3,13 @@
 <PageTitle>MP.SPEC</PageTitle>
 
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
+    <div class="@sideClass">
+        <NavMenu EC_compressUpdated="@UpdateNavDisplay" />
     </div>
 
     <main>
         <div class="top-row px-4 justify-content-between">
-                <CmpTop></CmpTop>
+            <CmpTop></CmpTop>
         </div>
         <article class="content pt-0 m-2">
             @Body
@@ -21,4 +21,13 @@
 </div>
 
 @code {
+    protected bool navLarge { get; set; } = true;
+
+    protected string sideClass { get; set; } = "sidebar";
+
+    protected void UpdateNavDisplay()
+    {
+        navLarge = !navLarge;
+        sideClass = navLarge ? "sidebar" : "sidebarSmall";
+    }
 }

MP.SPEC/Shared/MainLayout.razor.css

@@ -66,7 +66,7 @@ main {
         top: 0;
     }
     .sidebarSmall {
-        width: 80px;
+        width: 5rem;
         height: 100vh;
         position: sticky;
         top: 0;

MP.SPEC/Shared/NavMenu.razor

@@ -2,9 +2,16 @@
 @using MP.SPEC.Data
 @inject MpDataService MDService
 
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">MP.SPEC</a>
+<div class="top-row ps-2 navbar navbar-dark">
+    <div class="container-fluid px-0">
+        @if (!showText)
+        {
+            <a class="navbar-brand p-0" @onclick="() => ToggleCompress()">MS <i class="fas fa-caret-square-right"></i></a>
+        }
+        else
+        {
+            <a class="navbar-brand" @onclick="() => ToggleCompress()">MP.SPEC <i class="fas fa-caret-square-left"></i></a>
+        }
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -15,7 +22,7 @@
     <nav class="flex-column">
         <div class="nav-item px-2">
             <NavLink class="nav-link px-2" href="" Match="NavLinkMatch.All">
-                <span class="fa-solid fa-house pe-2" aria-hidden="true"></span> Home
+                <span class="fa-solid fa-house px-2" aria-hidden="true"></span> <span class="@hideText">Home</span>
             </NavLink>
         </div>
         @if (ElencoLink == null)
@@ -28,7 +35,7 @@
             {
                 <div class="nav-item px-2">
                     <NavLink class="nav-link px-2" href="@item.NavigateUrl">
-                        <span class="@item.icona pe-2" aria-hidden="true"></span> @item.Testo
+                        <span class="@item.icona px-2" aria-hidden="true"></span> <span class="@hideText">@item.Testo</span>
                     </NavLink>
                 </div>
             }
@@ -53,4 +60,19 @@
         ElencoLink = await MDService.ElencoLink();
         await Task.Delay(1);
     }
+
+    protected bool showText { get; set; } = true;
+    protected void ToggleCompress()
+    {
+        showText = !showText;
+        EC_compressUpdated.InvokeAsync(showText);
+    }
+
+    protected string hideText
+    {
+        get => showText ? "" : "invisible";
+    }
+
+    [Parameter]
+    public EventCallback<bool> EC_compressUpdated { get; set; }
 }