move Settings tab bar from app bar to dedicated tab bar

komga-webui/src/router.ts

@@ -40,18 +40,21 @@ const router = new Router({
         {
           path: '/settings',
           name: 'settings',
-          redirect: { name: 'settings-users' }
-        },
-        {
-          path: '/settings/users',
-          name: 'settings-users',
-          beforeEnter: adminGuard,
-          component: () => import(/* webpackChunkName: "settings-users" */ './components/SettingsUsers.vue'),
+          redirect: { name: 'settings-users' },
+          component: () => import(/* webpackChunkName: "settings" */ './views/Settings.vue'),
           children: [
             {
-              path: '/settings/users/add',
-              name: 'settings-users-add',
-              component: () => import(/* webpackChunkName: "settings-user" */ './components/UserAddDialog.vue')
+              path: '/settings/users',
+              name: 'settings-users',
+              beforeEnter: adminGuard,
+              component: () => import(/* webpackChunkName: "settings-users" */ './components/SettingsUsers.vue'),
+              children: [
+                {
+                  path: '/settings/users/add',
+                  name: 'settings-users-add',
+                  component: () => import(/* webpackChunkName: "settings-user" */ './components/UserAddDialog.vue')
+                }
+              ]
             }
           ]
         },

komga-webui/src/views/Home.vue

@@ -4,16 +4,6 @@
       app
     >
       <v-app-bar-nav-icon @click.stop="toggleDrawer"/>
-
-      <v-spacer/>
-
-      <v-tabs v-if="tabs.length > 0">
-        <v-tab v-for="(t, index) in tabs" :key="index"
-               :id="t.id"
-               :to="{name: t.route}"
-        >{{ t.name }}
-        </v-tab>
-      </v-tabs>
     </v-app-bar>
 
     <v-navigation-drawer app v-model="drawerVisible">
@@ -138,17 +128,6 @@ export default Vue.extend({
     },
     isAdmin (): boolean {
       return this.$store.getters.meAdmin
-    },
-    tabs () {
-      if (this.$store.state.route.name) {
-        if (this.$store.state.route.name.startsWith('settings')) {
-          return [
-            { id: 'tab-users', route: 'settings-users', name: 'Users' }
-          ]
-        }
-        return []
-      }
-      return []
     }
   },
   methods: {

komga-webui/src/views/Settings.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <v-tabs>
+      <v-tab :to="{name: 'settings-users'}">Users</v-tab>
+    </v-tabs>
+    <router-view/>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'Settings'
+})
+</script>
+
+<style scoped>
+
+</style>