Add tabs on settings. Close #220

assets/src/css/dashboard.css

@@ -131,18 +131,21 @@ p code {
   display: flex;
   color: rgb(84, 110, 122);
   font-weight: 500;
-  padding: 0 0 1em;
   margin: 0 0 1em;
   font-size: .8em;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  text-align: center;
+  justify-content: space-between;
+  padding: 0;
 }
 
 .dashboard #nav li {
   width: 100%;
+  padding: 0 0 1em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.dashboard #nav li:last-child {
-  text-align: right
+.dashboard #nav li.active {
+  border-color: #2196f3
 }
 
 .dashboard #nav i {

assets/src/views/GlobalSettings.vue

@@ -1,16 +1,9 @@
 <template>
   <div class="dashboard">
     <ul id="nav">
-      <li>
-        <router-link to="/settings/profile">
-          <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.profileSettings') }}
-        </router-link>
-      </li>
-      <li>
-        <router-link to="/users">
-          {{ $t('settings.userManagement') }} <i class="material-icons">keyboard_arrow_right</i>
-        </router-link>
-      </li>
+      <li><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+      <li class="active"><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+      <li><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
     </ul>
 
     <h1>{{ $t('settings.globalSettings') }}</h1>

assets/src/views/ProfileSettings.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="dashboard">
     <ul id="nav" v-if="user.admin">
-      <li>
-        <router-link to="/settings/global">
-          {{ $t('settings.globalSettings') }} <i class="material-icons">keyboard_arrow_right</i>
-        </router-link>
-      </li>
+      <li class="active"><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+      <li><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+      <li><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
     </ul>
 
     <h1>{{ $t('settings.profileSettings') }}</h1>

assets/src/views/User.vue

@@ -2,12 +2,9 @@
   <div>
     <form @submit="save" class="dashboard">
       <ul id="nav">
-        <li>
-          <router-link to="/users">
-            <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.userManagement') }}
-          </router-link>
-        </li>
-        <li></li>
+        <li><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+        <li><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+        <li><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
       </ul>
 
       <h1 v-if="id === 0">{{ $t('settings.newUser') }}</h1>

assets/src/views/Users.vue

@@ -1,12 +1,9 @@
 <template>
   <div class="dashboard">
     <ul id="nav">
-      <li>
-        <router-link to="/settings/global">
-          <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.globalSettings') }}
-        </router-link>
-      </li>
-      <li></li>
+      <li><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+      <li><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+      <li class="active"><router-link to="/users">{{ $t('settings.userManagement') }}</router-link></li>
     </ul>
 
     <h1>{{ $t('settings.users') }} <router-link to="/users/new"><button>{{ $t('buttons.new') }}</button></router-link></h1>
@@ -19,7 +16,7 @@
         <th></th>
       </tr>
 
-      <tr v-for="user in users">
+      <tr v-for="user in users" :key="user.id">
         <td>{{ user.username }}</td>
         <td><i v-if="user.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
         <td>{{ user.filesystem }}</td>