From 890d4857a0eae88e104f7b96ddf9d1746e488437 Mon Sep 17 00:00:00 2001
From: Natalia Portillo <claunia@claunia.com>
Date: Fri, 3 May 2024 16:01:44 +0100
Subject: [PATCH] Set CSS for sidebar.

---
 .../Components/Layout/MainLayout.razor.css    |   2 +-
 .../Components/Layout/NavMenu.razor           |   6 +-
 Aaru.Server.New/wwwroot/app.css               | 119 ++++++++++++++++++
 3 files changed, 124 insertions(+), 3 deletions(-)

diff --git a/Aaru.Server.New/Components/Layout/MainLayout.razor.css b/Aaru.Server.New/Components/Layout/MainLayout.razor.css
index 205a60d9..3d9b1312 100644
--- a/Aaru.Server.New/Components/Layout/MainLayout.razor.css
+++ b/Aaru.Server.New/Components/Layout/MainLayout.razor.css
@@ -52,7 +52,7 @@ main {
   }
 
   .sidebar {
-    width: 250px;
+    width: 350px;
     height: 100vh;
     position: sticky;
     top: 0;
diff --git a/Aaru.Server.New/Components/Layout/NavMenu.razor b/Aaru.Server.New/Components/Layout/NavMenu.razor
index 8c8176e0..7f973e97 100644
--- a/Aaru.Server.New/Components/Layout/NavMenu.razor
+++ b/Aaru.Server.New/Components/Layout/NavMenu.razor
@@ -6,7 +6,7 @@
 
 <div class="navbar navbar-dark ps-3 top-row">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">Aaru.Server.New</a>
+        <a class="navbar-brand" href="">Aaru</a>
     </div>
 </div>
 
@@ -20,7 +20,9 @@
             </NavLink>
         </div>
 
-        @((MarkupString)_sidebarMarkup)
+        <div class="nav-item px-3 sidebar-nav">
+            @((MarkupString)_sidebarMarkup)
+        </div>
 
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="auth">
diff --git a/Aaru.Server.New/wwwroot/app.css b/Aaru.Server.New/wwwroot/app.css
index 56ad2153..eefdd149 100644
--- a/Aaru.Server.New/wwwroot/app.css
+++ b/Aaru.Server.New/wwwroot/app.css
@@ -49,3 +49,122 @@ h1:focus {
 .darker-border-checkbox.form-check-input {
   border-color: #929292;
 }
+
+.sidebar {
+  border-right: 1px solid rgba(0, 0, 0, 0.4);
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transition: transform 0.25s ease-out;
+  width: 300px;
+  z-index: 3;
+}
+
+.sidebar > h1 {
+  margin: 0 auto 1rem;
+  font-size: 1.5rem;
+  font-weight: 300;
+  text-align: center;
+}
+
+.navbar-brand {
+  text-decoration: none;
+  font-weight: 600;
+  color: #E18FDC !important;
+}
+
+.sidebar > h1 .app-nav {
+  display: block;
+  position: static;
+}
+
+.sidebar .sidebar-nav {
+  line-height: 2em;
+  padding-bottom: 40px;
+  text-wrap: pretty;
+}
+
+.sidebar li.collapse .app-sub-sidebar {
+  display: none;
+}
+
+.sidebar ul {
+  margin: 0 0 0 15px;
+  padding: 0;
+}
+
+.sidebar li > p {
+  font-weight: 700;
+  margin: 0;
+  color: #C32727;
+}
+
+.sidebar ul,
+.sidebar ul li {
+  list-style: none;
+}
+
+.sidebar ul li a {
+  border-bottom: none;
+  display: block;
+}
+
+.sidebar ul li ul {
+  padding-left: 20px;
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 4px;
+}
+
+.sidebar:hover::-webkit-scrollbar-thumb {
+  background: hsla(0, 0%, 53%, 0.4);
+}
+
+.sidebar:hover::-webkit-scrollbar-track {
+  background: hsla(0, 0%, 53%, 0.1);
+}
+
+.sidebar,
+body {
+  background-color: #222222;
+}
+
+.sidebar {
+  color: #364149;
+}
+
+.sidebar li {
+  margin: 6px 0;
+}
+
+.sidebar ul li a {
+  color: #E18FDC;
+  font-size: 14px;
+  font-weight: 600;
+  overflow: hidden;
+  text-decoration: none;
+  text-overflow: ellipsis;
+}
+
+.sidebar ul li a:hover {
+  text-decoration: underline;
+}
+
+.sidebar ul li ul {
+  padding: 0;
+}
+
+.sidebar ul li.active > a {
+  border-right: 2px solid;
+  color: var(--theme-color, #E18FDC);
+  font-size: 16px;
+  font-weight: 600;
+}
\ No newline at end of file