feat($App): use YouTube-like layout

use YouTube-like layout

BREAKING CHANGE: use YouTube-like layout

Author: johnnymillergh

src/App.vue

@@ -1,56 +1,11 @@
 <template>
-  <v-app id="app-container">
-    <v-app-bar app color="primary" dark>
-      <div class="d-flex align-center">
-        <v-img alt="Vuetify Logo" class="shrink mr-2" contain
-               src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition"
-               width="40"/>
-        <span id="app-name">{{ appName }}</span>
-        <span id="version">{{ version }}</span>
-        <span id="environment">{{ environment }}</span>
-      </div>
-      <v-spacer/>
-      <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-    <v-content>
-      <v-sheet class="text-center">
-        <router-link to="/">Home</router-link>
-        <span>|</span>
-        <router-link to="/vuetify-demo">Vuetify Demo</router-link>
-      </v-sheet>
-      <transition name="fade-transform" mode="out-in">
-        <router-view class="app-container"/>
-      </transition>
-    </v-content>
+  <v-app id="app">
+    <transition name="fade-transform" mode="out-in">
+      <router-view/>
+    </transition>
   </v-app>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { AppUtil } from '@/utils/app-util'
-
-export default Vue.extend({
-  name: 'App',
-  data: () => ({
-    appName: '',
-    version: '',
-    environment: ''
-  }),
-  mounted (): void {
-    this.appName = AppUtil.getName()
-      .replace(/-/g, ' ')
-      .split(' ')
-      .map(word => word[0].toUpperCase() + word.substr(1).toLowerCase())
-      .join(' ')
-    this.version = AppUtil.getVersionInfo()
-    this.environment = `Environment: ${process.env.NODE_ENV} (${process.env.VUE_APP_ENV})`
-  }
-})
-</script>
-
 <!--suppress CssUnusedSymbol -->
 <style lang="scss" scoped>
 .fade-transform-leave-active, .fade-transform-enter-active {
@@ -72,20 +27,5 @@ export default Vue.extend({
     font-size: 32px;
     font-weight: bold;
   }
-
-  #version {
-    text-align: right;
-    font-size: 32px;
-    position: relative;
-    left: 8px;
-  }
-
-  #environment {
-    text-align: right;
-    font-size: 18px;
-    position: relative;
-    top: 4px;
-    left: 16px;
-  }
 }
 </style>

src/router/index.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '../views/home/index.vue'
 
 Vue.use(VueRouter)
 
@@ -11,12 +11,42 @@ const routes = [
     component: Home
   },
   {
-    path: '/vuetify-demo',
-    name: 'vuetify-demo',
+    path: '/hello-world',
+    name: 'hello-world',
     // route level code-splitting
-    // this generates a separate chunk (vuetify-demo.[hash].js) for this route
+    // this generates a separate chunk (hello-world.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "vuetify-demo" */ '@/views/VuetifyDemo.vue')
+    component: Home,
+    children: [
+      // hello-world will be rendered inside Homs's <router-view>
+      // when /user/:id is matched
+      {
+        path: '',
+        component: () => import(/* webpackChunkName: "hello-world" */ '@/views/hello-world/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/vuetify-demo',
+    name: 'vuetify-demo',
+    component: Home,
+    children: [
+      {
+        path: '',
+        component: () => import(/* webpackChunkName: "vuetify-demo" */ '@/views/vuetify-demo/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/form-validation',
+    name: 'form-validation',
+    component: Home,
+    children: [
+      {
+        path: '',
+        component: () => import(/* webpackChunkName: "form-validation" */ '@/views/form-validation/index.vue')
+      }
+    ]
   }
 ]