Add toolbar and navigation drawer

layouts/default.vue

@@ -1,29 +1,54 @@
 <template>
   <v-app>
-    <!--<v-navigation-drawer app></v-navigation-drawer>-->
-    <v-toolbar app>
-      <v-toolbar-title>
-        <span v-if="!hasUser"><span @click="() => { doLogin(); }">Login</span></span>
-        <v-menu v-if="hasUser" offset-y>
-          <v-btn flat slot="activator" color="primary">
-            <v-avatar size="24" class="mr-2"><v-img :src="user.picture" /></v-avatar>
-            <span>{{user.name}}</span>
-          </v-btn>
-          <v-list>
-            <v-list-tile>
-              <v-list-tile-title flat><nuxt-link to="/logout/">Logga ut</nuxt-link></v-list-tile-title>
-            </v-list-tile>
-          </v-list>
-        </v-menu>
-      </v-toolbar-title>
+    <v-navigation-drawer
+        v-model="left"
+        temporary
+        app
+    >
+      <v-list dense>
+        <v-list-tile v-if="!hasUser" @click="() => { doLogin(); }">
+          <v-list-tile-content>
+            <v-list-tile-title>Login</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile avatar v-if="hasUser">
+          <v-list-tile-avatar>
+            <v-img :src="user.picture" :alt="user.name"></v-img>
+          </v-list-tile-avatar>
+          <v-list-tile-content>
+            <v-list-tile-title v-html="user.name"></v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile v-if="hasUser">
+          <v-list-tile-action>
+            <v-icon>exit_to_app</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <nuxt-link to="/logout/"><v-list-tile-title>Logga ut</v-list-tile-title></nuxt-link>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+    <v-toolbar app scroll-toolbar-off-screen>
+      <v-toolbar-side-icon v-on:click="left = !left"></v-toolbar-side-icon>
+      <v-toolbar-title v-html="title"></v-toolbar-title>
       <v-spacer></v-spacer>
+      <v-toolbar-items>
+        <v-list-tile avatar v-if="hasUser">
+          <v-list-tile-avatar>
+            <v-img :src="user.picture" :alt="user.name"></v-img>
+          </v-list-tile-avatar>
+          <v-list-tile-content>
+            <v-list-tile-title v-html="user.name"></v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-toolbar-items>
     </v-toolbar>
     <v-content>
       <v-container fluid>
         <nuxt />
       </v-container>
     </v-content>
-    <v-footer app></v-footer>
   </v-app>
 </template>
 
@@ -48,12 +73,16 @@ import auth from "~/utils/auth";
 export default {
   data() {
     return {
-      user: undefined
+      user: undefined,
+      left: false
     };
   },
   computed: {
     hasUser() {
       return this.user;
+    },
+    title() {
+      return this.$store.state.title;
     }
   },
   watch: {