From 5b28aa0848710b9d3ee02a2aa912856395f48bd2 Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Fri, 19 Feb 2021 16:01:43 +0000
Subject: [PATCH] feat: improved settings navbar

---
 frontend/public/themes/dark.css |  9 +++++-
 frontend/src/css/dashboard.css  | 51 ++++++++++++++++++++++++++-------
 frontend/src/views/Settings.vue | 16 +++++++----
 3 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css
index 2a70351c..cba3e740 100644
--- a/frontend/public/themes/dark.css
+++ b/frontend/public/themes/dark.css
@@ -114,6 +114,13 @@ nav > div {
   background: var(--surfaceSecondary);
 }
 
+.dashboard #nav ul li {
+  color: var(--textSecondary);
+}
+.dashboard #nav ul li:hover {
+  background: var(--surfaceSecondary);
+}
+
 .card h3,
 .dashboard #nav,
 .dashboard p label {
@@ -138,7 +145,7 @@ nav > div {
   background: #147A41;
 }
 
-.dashboard #nav li,
+.dashboard #nav .wrapper,
 .collapsible {
   border-color: var(--divider);
 }
diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index bece5d9d..558d8de7 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -49,25 +49,56 @@ p code {
 }
 
 .dashboard #nav {
+  display: flex;
+  padding-bottom: 1em;
+  overflow: auto;
+}
+
+.dashboard #nav .wrapper {
+  display: flex;
+  flex-grow: 1;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+}
+
+.dashboard #nav ul {
   list-style: none;
   display: flex;
   color: rgb(84, 110, 122);
   font-weight: 500;
-  margin: 0 0 1em;
+  padding: 0;
+  margin: 0 0 -2px 0;
   font-size: .8em;
   text-align: center;
-  justify-content: space-between;
-  padding: 0;
+  justify-content: left;
 }
 
-.dashboard #nav li {
+.dashboard #nav ul li {
+  position: relative;
+  padding: 1.5em 2em;
+  white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: .1s ease-in-out all;
+
+}
+
+.dashboard #nav ul li:hover {
+  background: var(--moon-grey);
+}
+
+.dashboard #nav ul li.active {
+  border-color: var(--blue);
+  color: var(--blue);
+}
+
+.dashboard #nav ul li.active::before {
   width: 100%;
-  padding: 0 0 1em;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
-}
-
-.dashboard #nav li.active {
-  border-color: var(--blue)
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  background: var(--blue);
+  opacity: 0.08;
 }
 
 .dashboard #nav i {
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 6c563fc7..17119397 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="dashboard">
-    <ul id="nav">
-      <li :class="{ active: $route.path === '/settings/profile' }"><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
-      <li :class="{ active: $route.path === '/settings/shares' }"><router-link to="/settings/shares">{{ $t('settings.shareManagement') }}</router-link></li>
-      <li v-if="user.perm.admin" :class="{ active: $route.path === '/settings/global' }"><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
-      <li v-if="user.perm.admin" :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li>
-    </ul>
+    <div id="nav">
+      <div class="wrapper">
+        <ul>
+          <router-link to="/settings/profile"><li :class="{ active: $route.path === '/settings/profile' }">{{ $t('settings.profileSettings') }}</li></router-link>
+          <router-link to="/settings/shares"><li :class="{ active: $route.path === '/settings/shares' }">{{ $t('settings.shareManagement') }}</li></router-link>
+          <router-link to="/settings/global"><li :class="{ active: $route.path === '/settings/global' }" v-if="user.perm.admin">{{ $t('settings.globalSettings') }}</li></router-link>
+          <router-link to="/settings/users"><li :class="{ active: $route.path === '/settings/users' || $route.name === 'User' }" v-if="user.perm.admin">{{ $t('settings.userManagement') }}</li></router-link>
+        </ul>
+      </div>
+    </div>
 
     <router-view></router-view>
   </div>