Aggiornamento librerie

SteUp.Shared/Components/Layout/NavMenu.razor

@@ -31,27 +31,20 @@
 
         @if (PlusVisible)
         {
-            <MudMenu PopoverClass="custom_popover" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight">
-                <ActivatorContent>
-                    <MudFab Class="custom-plus-button" OnClick="OnOpenMenu" Color="Color.Surface" Size="Size.Medium"
-                            IconSize="Size.Medium"
-                            IconColor="Color.Primary" StartIcon="@Icons.Material.Rounded.Add"/>
-                </ActivatorContent>
-                <ChildContent>
-                    @if (SchedaVisible)
-                    {
-                        <MudMenuItem Disabled="!NetworkService.IsNetworkAvailable()" OnClick="@NewScheda">
-                            Nuova scheda
-                        </MudMenuItem>
-                    }
-                    else
-                    {
-                        <MudMenuItem Disabled="!NetworkService.IsNetworkAvailable()" OnClick="@NewActivity">
-                            Nuova ispezione
-                        </MudMenuItem>
-                    }
-                </ChildContent>
-            </MudMenu>
+            <MudFabMenu ButtonClass="custom-plus-button" MenuClass="custom-menu-fab" OnClick="@OnOpenMenu" StartIcon="@Icons.Material.Filled.Add" 
+                        IconColor="Color.Primary" Color="Color.Surface" AlignItems="AlignItems.End" 
+                        Size="Size.Medium" IconSize="Size.Medium">
+                @if (SchedaVisible)
+                {
+                    <MudFabMenuItem Disabled="!NetworkService.IsNetworkAvailable()" OnClick="@NewScheda" 
+                                    Label="Nuova scheda" Color="Color.Surface"/>
+                }
+                else
+                {
+                    <MudFabMenuItem Disabled="!NetworkService.IsNetworkAvailable()" OnClick="@NewActivity" 
+                                    Label="Nuova ispezione" Color="Color.Surface"/>
+                }
+            </MudFabMenu>
         }
     </nav>
 </div>

SteUp.Shared/Components/Layout/NavMenu.razor.css

@@ -7,11 +7,17 @@
     transition: all 0.3s ease-in-out;
 }
 
-.animated-navbar.show-nav { transform: translateY(0); }
+.animated-navbar.show-nav {
+    transform: translateY(0);
+}
 
-.animated-navbar.hide-nav { transform: translateY(150%); }
+.animated-navbar.hide-nav {
+    transform: translateY(150%);
+}
 
-.animated-navbar.with-plus { margin-left: 30px; }
+.animated-navbar.with-plus {
+    margin-left: 30px;
+}
 
 .navbar {
     padding-bottom: 1rem;
@@ -23,7 +29,9 @@
     transition: all 0.3s ease-in-out;
 }
 
-.navbar.with-plus { transform: translateX(-30px); }
+.navbar.with-plus {
+    transform: translateX(-30px);
+}
 
 .navbar.without-plus {
     transform: translateX(0);
@@ -38,26 +46,26 @@
     transition: all 0.3s ease-in-out;
 }
 
-.nav-item { font-size: 0.9rem; }
+.nav-item {
+    font-size: 0.9rem;
+}
 
 .nav-item.plus-button {
     position: relative;
     bottom: 15px;
 }
 
-.navbar ::deep .custom-plus-button .mud-icon-root {
-    transition: .5s;
-    transform: rotate(0);
-    font-size: 2rem;
-}
-
 .navbar ::deep .custom-plus-button {
     background: var(--mud-palette-surface);
-    box-shadow: var(--custom-box-shadow);
-    transition: all 0.3s ease-in-out;
 }
 
-.navbar ::deep .custom-plus-button:focus .mud-icon-root { transform: rotate(225deg); }
+.navbar ::deep .custom-menu-fab .mud-fab-label {
+    width: max-content;
+}
+
+.navbar ::deep .custom-menu-fab .mud-button-root.mud-fab {
+    background: var(--mud-palette-surface);
+}
 
 .nav-item ::deep a {
     display: flex;
@@ -74,24 +82,34 @@
     min-width: 75px;
 }
 
-.nav-item ::deep a.active > div { color: var(--mud-palette-primary); }
+.nav-item ::deep a.active > div {
+    color: var(--mud-palette-primary);
+}
 
 .nav-item ::deep a.active > div > i {
     /*background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);*/
     border-radius: 10px;
 }
 
-.nav-item ::deep a.active > div > span { font-weight: 800; }
+.nav-item ::deep a.active > div > span {
+    font-weight: 800;
+}
 
 .nav-item ::deep a:not(.active) > div {
     color: var(--mud-palette-text-primary);
 }
 
-.nav-item ::deep a i { font-size: 1.65rem; }
+.nav-item ::deep a i {
+    font-size: 1.65rem;
+}
 
 .nav-item ::deep a span {
     font-size: 0.8rem;
     font-weight: 500;
 }
 
-@supports (-webkit-touch-callout: none) { .navbar { padding-bottom: env(safe-area-inset-bottom); } }
+@supports (-webkit-touch-callout: none) {
+    .navbar {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}