Style tweaks

- Removing HelloWorld - we don't use it. - Make the menu nicer with v-navigation-drawer and v-toolbar

Author: wataruoguchi

src/App.vue

@@ -1,22 +1,71 @@
 <template>
  <div id="app">
- <div id="nav">
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link> |
- <router-link to="/signUp">Sign Up</router-link> |
- <router-link to="/signUpConfirm">Confirm</router-link> |
- <router-link to="/signIn">Sign In</router-link>
- </div>
- <router-view/>
+ <v-navigation-drawer v-model="sideNav" app right>
+ <v-list>
+ <v-list-tile v-for="(item, itemIdx) in menuItems" :key="itemIdx" :to="item.link">
+ <v-list-tile-content>
+ <v-list-tile-title>{{ item.label }}</v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </v-list>
+ </v-navigation-drawer>
+ <v-toolbar scroll-off-screen fixed>
+ <v-toolbar-side-icon class="hidden-md-and-up" @click.stop="sideNav = !sideNav"></v-toolbar-side-icon>
+ <v-toolbar-title>My App</v-toolbar-title>
+ <v-spacer></v-spacer>
+ <v-toolbar-items class="hidden-sm-and-down">
+ <v-btn flat v-for="(item, itemIdx) in menuItems" :key="itemIdx" :to="item.link">{{ item.label }}</v-btn>
+ </v-toolbar-items>
+ </v-toolbar>
+ <v-content>
+ <v-container fluid fill-height>
+ <v-layout justify-center align-center>
+ <router-view style="margin-top:70px"/>
+ </v-layout>
+ </v-container>
+ </v-content>
  </div>
 </template>
-
+<script>
+export default {
+ data() {
+ return {
+ sideNav: false,
+ }
+ },
+ computed: {
+ menuItems() {
+ return [
+ {
+ label: "Home",
+ link: "/",
+ },
+ {
+ label: "About",
+ link: "/about",
+ },
+ {
+ label: "Sign Up",
+ link: "/signUp",
+ },
+ {
+ label: "Confirm",
+ link: "/signUpConfirm",
+ },
+ {
+ label: "Sign In",
+ link: "/signIn",
+ },
+ ]
+ }
+ }
+}
+</script>
 <style>
 #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
- margin-top: 60px;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,20 +1,17 @@
 <template>
  <div class="home">
+ <div>
+ <img alt="Vue logo" src="../assets/logo.png">
+ </div>
  <v-btn @click="signOut">Sign Out</v-btn>
- <img alt="Vue logo" src="../assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 import {signOut} from '@/utils/auth.js'
 export default {
  name: 'home',
- components: {
- HelloWorld
- },
  methods: {
  signOut() {
  signOut().then((data) => console.log('DONE', data)).catch((err) => console.log('SIGN OUT ERR', err));