Working Layout

frontend/src/components/base/BaseLayout.vue

@@ -6,8 +6,17 @@
       app
       v-model="drawer"
     >
+      <v-toolbar flat>
+        <v-list>
+          <v-list-tile>
+            <v-list-tile-title class="title">
+              {{ examInstance }}
+            </v-list-tile-title>
+          </v-list-tile>
+        </v-list>
+      </v-toolbar>
       <v-list dense>
-        <v-list-tile v-for="(item, i) in navItems" :key="i" :to="item.path">
+        <v-list-tile v-for="(item, i) in navItems" :key="i" :to="item.route">
           {{ item.name }}
         </v-list-tile>
       </v-list>
@@ -16,7 +25,8 @@
       app
       clipped-left
       fixed
-      color="deep-orange darken-4"
+      dark
+      color="indigo darken-4"
       class="grady-toolbar"
     >
       <v-toolbar-title>
@@ -27,10 +37,10 @@
         </v-avatar>
       </v-toolbar-title>
       <span class="pl-2 grady-speak">{{ gradySpeak }}</span>
-      <h2 class="pl-5">{{ $store.state.examInstance }}</h2>
       <div class="toolbar-content">
-        <span>Logged in as {{ $store.state.username }}</span>
+        <span>{{ userRole }} | {{ username }}</span>
       </div>
+      <v-btn color="blue darken-1" to="/" @click.native="logout">Logout</v-btn>
     </v-toolbar>
     <v-content>
       <slot></slot>
@@ -39,18 +49,28 @@
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
+  import { mapActions, mapGetters, mapState } from 'vuex'
   export default {
     name: 'base-layout',
     data () {
       return {
-        drawer: true,
-        props: ['navItems']
+        drawer: true
       }
     },
+    props: ['navItems'],
     computed: {
       ...mapGetters([
         'gradySpeak'
+      ]),
+      ...mapState([
+        'examInstance',
+        'username',
+        'userRole'
+      ])
+    },
+    methods: {
+      ...mapActions([
+        'logout'
       ])
     }
   }

frontend/src/components/student/StudentLayout.vue

 <template>
   <base-layout
-
-  ></base-layout>
+    :navItems="navItems"
+  >
+    <slot></slot>
+  </base-layout>
 </template>
 
 <script>
@@ -13,6 +15,7 @@
       return {
         navItems: [
           {
+            name: 'Login',
             route: '/'
           }
         ]