ayanova/src/App.vue

@@ -26,14 +26,6 @@
         <v-icon>fa-search</v-icon>
       </v-btn>
 
-      <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="fa-search" label="Search"></v-text-field>
-      <v-spacer></v-spacer>
-      <v-btn icon v-bind:href="helpUrl" target="blank;">
-        <v-icon>fa-question-circle</v-icon>
-      </v-btn>
-      <v-btn icon>
-        <v-icon>fa-ellipsis-v</v-icon>
-      </v-btn>-->
       <v-menu bottom left>
         <template v-slot:activator="{ on }">
           <v-btn dark icon v-on="on">
@@ -41,10 +33,38 @@
           </v-btn>
         </template>
 
-        <v-list>
+        <!-- <v-list>
           <v-list-tile v-for="(item, i) in items" :key="i">
             <v-list-tile-title>{{ item.title }}</v-list-tile-title>
           </v-list-tile>
+        </v-list>-->
+        <!-- <v-list two-line>
+          <template v-for="(item, index) in items">
+            <v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
+
+            <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>
+
+            <v-list-tile v-else :key="item.title" avatar @click="stubClick">
+              <v-list-tile-avatar>
+                <img :src="item.avatar">
+              </v-list-tile-avatar>
+
+              <v-list-tile-content>
+                <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </template>
+        </v-list>-->
+        <v-list dense>
+          <v-list-tile v-for="item in contextItems" :key="item.route" :to="item.route">
+            <v-list-tile-action>
+              <v-icon>{{ "fa-" + item.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
         </v-list>
       </v-menu>
     </v-toolbar>
@@ -79,6 +99,29 @@ export default {
     return {
       drawer: null,
       items: [
+        { header: "Today" },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+          title: "Brunch this weekend?",
+          subtitle:
+            "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
+        },
+        { divider: true, inset: true },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+          title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
+          subtitle:
+            "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend."
+        },
+        { divider: true, inset: true },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+          title: "Oui oui",
+          subtitle:
+            "<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?"
+        }
+      ],
+      contextItems: [
         { title: "Click Me" },
         { title: "Click Me" },
         { title: "Click Me" },
@@ -87,6 +130,11 @@ export default {
     };
   },
   mounted() {
+    //subscribe to context menu changes
+    this.$gzevent.$on("context-menu-change", function(ctx) {
+      alert("CLICK " + ctx);
+    });
+    //redirect to login if not authenticated
     if (!this.$store.state.authenticated) {
       this.$router.replace({ name: "login" });
     }
@@ -97,6 +145,9 @@ export default {
     },
     logout() {
       this.$store.state.authenticated = false;
+    },
+    stubClick() {
+      alert("CLICK");
     }
   },
   computed: {