refactored Drawer a bit

frontend/src/App.vue

@@ -1,11 +1,6 @@
 <template>
   <v-app id="pycs2">
-<!--
-    <v-app-bar app>
-      PyCSv2
-    </v-app-bar>
- -->
-    <Drawer v-model="drawer"/>
+    <Drawer/>
 
     <v-main>
       <v-container fluid>
@@ -32,7 +27,6 @@ export default {
   },
 
   data: () => ({
-    drawer: false,
   }),
 };
 </script>

frontend/src/components/Drawer.vue

@@ -15,35 +15,36 @@
       ></v-avatar>
 
       </router-link>
-
-      <div class="row">
-        <div class="col-md-6">{{ username }}</div>
-        <div class="col-md-3">
-          <div v-if="loggedIn">
-            <v-btn :to = "{ name: 'logout' }" small color="primary">
-              <span>Logout</span>
-              <v-icon>mdi-logout</v-icon>
-            </v-btn>
-          </div>
-        </div>
-      </div>
+      <v-row>
+        <v-col cols=6>{{ username }}</v-col>
+        <v-col cols=3>
+          <v-btn
+            v-if="loggedIn"
+            :to = "{ name: 'logout' }"
+            color="primary"
+            small
+          >
+            Logout <v-icon>mdi-logout</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
     </v-sheet>
 
     <v-divider></v-divider>
 
     <v-list v-if="loggedIn" >
       <v-list-item
-        v-for="[icon, text, dest] in links"
-        :key="icon"
-        :to="{name: dest}"
+        v-for="link in links"
+        :key="link.id"
+        :to="{name: link.dest}"
         link
       >
         <v-list-item-icon>
-          <v-icon>{{ icon }}</v-icon>
+          <v-icon>{{ link.icon }}</v-icon>
         </v-list-item-icon>
 
         <v-list-item-content>
-          <v-list-item-title>{{ text }}</v-list-item-title>
+          <v-list-item-title>{{ link.text }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
     </v-list>
@@ -51,39 +52,32 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+const uuidv4 = require("uuid/v4")
+
+class MenuItem {
+  constructor(text, icon, dest){
+    this.id = uuidv4();
+    this.text = text;
+    this.icon = icon;
+    this.dest = dest;
+  }
+}
 
 export default {
   name: "Drawer",
+
   computed: {
-    loggedIn() {
-      return this.$store.state.auth.loggedIn;
-    },
-    username() {
-      return this.$store.state.auth.tokens?.username
-    }
+
+    ...mapGetters('auth', [
+      'username',
+      'loggedIn'
+    ]),
+
   },
   data: () => ({
     links: [
-      [
-        'mdi-inbox-arrow-down',
-        'Projects',
-        'projects'
-      ],
-      // [
-      //   'mdi-send',
-      //   'Send',
-      //   'foo'
-      // ],
-      // [
-      //   'mdi-delete',
-      //   'Trash',
-      //   'index'
-      // ],
-      // [
-      //   'mdi-alert-octagon',
-      //   'Spam',
-      //   'index'
-      // ],
+      new MenuItem('Projects', 'mdi-inbox-arrow-down', 'projects'),
     ],
   }),
 

frontend/src/store/auth.module.js

@@ -9,6 +9,17 @@ const initialState = tokens
 export const auth = {
   namespaced: true,
   state: initialState,
+
+  getters: {
+    username: state => {
+      return state.tokens?.username;
+    },
+
+    loggedIn: state => {
+      return state.tokens !== null;
+    }
+  },
+
   actions: {
     login({ commit }, user) {
       return AuthService.login(user).then(