feat(routing): consistent routing without child routes

src/App.vue

@@ -9,23 +9,25 @@
       <window-controls
         :class="$style.aside__header"
       />
-      <router-view
-        :class="$style.aside__body"
-        name="aside"
-      />
+      <tabs-nav :class="$style.aside__body" />
     </aside>
+    <tabs-list :class="$style.main" />
     <router-view :class="$style.main" />
     <window-dimmer />
   </div>
 </template>
 
 <script>
+import TabsList from '@/components/TabsList.vue';
+import TabsNav from '@/components/TabsNav.vue';
 import WindowControls from '@/components/WindowControls.vue';
 import WindowDimmer from '@/components/WindowDimmer.vue';
 import NotificationSchedule from '@/utils/mixinNotificationSchedule';
 
 export default {
   components: {
+    TabsList,
+    TabsNav,
     WindowControls,
     WindowDimmer,
   },
@@ -69,7 +71,7 @@ export default {
 
 .main {
   @apply
-    z-10 flex flex-col overflow-y-auto
+    z-10 overflow-y-auto
     bg-grey-darkest shadow-md;
   grid-column: main;
 }

src/views/Tabs.vue → src/components/TabsList.vue

@@ -1,11 +1,13 @@
 <template>
-  <div>
+  <div
+    v-show="$route.name === 'tabs'"
+    :class="$style.tabs"
+  >
     <tab-main
       v-for="tab in $store.getters['Tabs/list']"
       :key="tab.ident"
       :item="tab"
     />
-    <router-view/>
   </div>
 </template>
 
@@ -18,3 +20,9 @@ export default {
   },
 };
 </script>
+
+<style lang="postcss" module>
+.tabs {
+  @apply flex flex-col;
+}
+</style>

src/components/WindowControls.vue

@@ -27,14 +27,12 @@
       style="-webkit-app-region: drag;"
     />
     <title-bar-button
-      v-if="!isSettingsView"
       icon="tab-plus"
       @click="createTab"
     />
     <title-bar-button
-      :icon="isSettingsView ? 'arrow-left' : 'settings'"
-      :active="isSettingsView"
-      @click="toggleSettings"
+      icon="settings"
+      @click="showSettings"
     />
   </title-bar>
 </template>
@@ -97,14 +95,10 @@ export default {
         this.window.maximize();
       }
     },
-    toggleSettings() {
-      if (this.isSettingsView) {
-        this.$router.back();
-      } else {
-        this.$router.push({
-          name: 'settings',
-        });
-      }
+    showSettings() {
+      this.$router.push({
+        name: 'settings',
+      });
     },
   },
 };

src/router/index.js

@@ -5,33 +5,24 @@ Vue.use(Router);
 
 export default new Router({
   routes: [
+    {
+      path: '/',
+      name: 'welcome',
+      component: () => import(/* webpackChunkName: "welcome" */ '@/views/Welcome.vue'),
+    },
     {
       path: '/tabs/:ident?',
       name: 'tabs',
-      components: {
-        aside: () => import(/* webpackChunkName: "tabs" */ '@/views/TabsNav.vue'),
-        default: () => import(/* webpackChunkName: "tabs" */ '@/views/Tabs.vue'),
-      },
-      children: [
-        {
-          path: '//',
-          name: 'welcome',
-          component: () => import(/* webpackChunkName: "welcome" */ '@/views/Welcome.vue'),
-        },
-        {
-          path: '/notifications',
-          name: 'notifications',
-          component: () => import(/* webpackChunkName: "notifications" */ '@/views/Notifications.vue'),
-        },
-      ],
+    },
+    {
+      path: '/notifications',
+      name: 'notifications',
+      component: () => import(/* webpackChunkName: "notifications" */ '@/views/Notifications.vue'),
     },
     {
       path: '/settings',
       name: 'settings',
-      components: {
-        aside: () => import(/* webpackChunkName: "settings" */ '@/views/Settings.vue'),
-        default: () => import(/* webpackChunkName: "tabs" */ '@/views/Tabs.vue'),
-      },
+      component: () => import(/* webpackChunkName: "settings" */ '@/views/Settings.vue'),
     },
     {
       path: '/about',