Cambio layout colore laterale

BlazorServerApp-2022/BlazorServerApp-2022/Components/CmpFooter.razor

@@ -0,0 +1,15 @@
+<div class="row text-light">
+    <div class="col-5 pe-0 text-left">
+        MP.MONO.UI | <span class="small">v.@version</span>
+    </div>
+    <div class="col-7 ps-0 text-end">
+        <span class="small">@adesso</span> | <a class="text-light" href="https://www.egalware.com/" target="_blank"><img class="img-fluid" width="16" src="images/LogoEgw.png" /> Egalware </a>
+    </div>
+</div>
+
+@code {
+    protected DateTime adesso = DateTime.Now;
+
+    Version version = typeof(Program).Assembly.GetName().Version;
+
+}

BlazorServerApp-2022/BlazorServerApp-2022/Shared/MainLayout.razor

@@ -15,5 +15,9 @@
         <article class="content px-4">
             @Body
         </article>
+
+        <div class="fixed-bottom bottom-row px-2">
+            <CmpFooter></CmpFooter>
+        </div>
     </main>
 </div>

BlazorServerApp-2022/BlazorServerApp-2022/Shared/MainLayout.razor.css

@@ -8,8 +8,9 @@ main {
     flex: 1;
 }
 
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+.sidebar,
+.sidebarSmall {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 20%, #3aa6ff 90%);
 }
 
 .top-row {
@@ -19,28 +20,37 @@ main {
     height: 3.5rem;
     display: flex;
     align-items: center;
+    /*justify-content: space-evenly;
+    display: flex;*/
 }
 
-    .top-row ::deep a, .top-row .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-    }
+.top-row ::deep a,
+.top-row .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+}
 
-    .top-row a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+.top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bottom-row {
+    color: #dedede;
+    background-color: #000000;
+    height: 2rem;
+    align-items: center;
+}
 
 @media (max-width: 640.98px) {
     .top-row:not(.auth) {
         display: none;
     }
-
     .top-row.auth {
         justify-content: space-between;
     }
-
-    .top-row a, .top-row .btn-link {
+    .top-row a,
+    .top-row .btn-link {
         margin-left: 0;
     }
 }
@@ -49,22 +59,37 @@ main {
     .page {
         flex-direction: row;
     }
-
     .sidebar {
-        width: 250px;
+        width: 15rem;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+    .sidebarSmall {
+        width: 80px;
         height: 100vh;
         position: sticky;
         top: 0;
     }
-
     .top-row {
         position: sticky;
         top: 0;
         z-index: 1;
     }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
+    .top-row,
+    article {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
     }
-}
+    .bottom-row {
+        position: fixed;
+        bottom: 0;
+        z-index: 1;
+    }
+    .main>div {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+        /*padding-left: 2rem !important;
+        padding-right: 1.5rem !important;*/
+    }
+}