From 2cd1d57cd3f171b726f4258bdf1a43ca5da89280 Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Mon, 12 Sep 2022 11:14:01 +0200
Subject: [PATCH] =?UTF-8?q?UPdate=20comportamento=20compress=20men=C3=B9?=
 =?UTF-8?q?=20laterale=20sx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 MP.SPEC/Shared/MainLayout.razor     | 15 +++++++++++---
 MP.SPEC/Shared/MainLayout.razor.css |  2 +-
 MP.SPEC/Shared/NavMenu.razor        | 32 ++++++++++++++++++++++++-----
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/MP.SPEC/Shared/MainLayout.razor b/MP.SPEC/Shared/MainLayout.razor
index bf1f26cc..f77de013 100644
--- a/MP.SPEC/Shared/MainLayout.razor
+++ b/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";
+    }
 }
\ No newline at end of file
diff --git a/MP.SPEC/Shared/MainLayout.razor.css b/MP.SPEC/Shared/MainLayout.razor.css
index 0118d2d0..b4db48d9 100644
--- a/MP.SPEC/Shared/MainLayout.razor.css
+++ b/MP.SPEC/Shared/MainLayout.razor.css
@@ -66,7 +66,7 @@ main {
         top: 0;
     }
     .sidebarSmall {
-        width: 80px;
+        width: 5rem;
         height: 100vh;
         position: sticky;
         top: 0;
diff --git a/MP.SPEC/Shared/NavMenu.razor b/MP.SPEC/Shared/NavMenu.razor
index 3d2cc2c8..437fd9af 100644
--- a/MP.SPEC/Shared/NavMenu.razor
+++ b/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; }
 }