ayanova/src/App.vue

@@ -12,27 +12,41 @@
         </v-list-tile>
       </v-list>
     </v-navigation-drawer>
-    <v-toolbar
-      v-if="isAuthenticated"
-      :color="contextAppBar.isMain?'primary':'secondary'"
-      dark
-      fixed
-      app
-    >
+    <v-toolbar v-if="isAuthenticated" :color="appBar.isMain?'primary':'secondary'" dark fixed app>
       <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
-        <v-icon>{{ contextAppBar.icon }}</v-icon>
-        <span>{{ contextAppBar.title}}</span>
-        <!-- <v-avatar size="32px" tile>
-          <img :src="require('./assets/logo.svg')" alt="AyaNova">
-        </v-avatar>
-        <span class="hidden-sm-and-down">AyaNova</span>-->
+        <v-icon>{{ appBar.icon }}</v-icon>&nbsp;
+        <span>{{ appBar.title}}</span>
       </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon>
+        <v-icon>fa-save</v-icon>
+      </v-btn>
+      <v-btn icon>
+        <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">
+            <v-icon>fa-ellipsis-v</v-icon>
+          </v-btn>
+        </template>
+
+        <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-menu>
     </v-toolbar>
     <v-content>
       <v-container fluid fill-height>
@@ -63,7 +77,13 @@ export default {
   name: "App",
   data() {
     return {
-      drawer: null
+      drawer: null,
+      items: [
+        { title: "Click Me" },
+        { title: "Click Me" },
+        { title: "Click Me" },
+        { title: "Click Me 2" }
+      ]
     };
   },
   mounted() {
@@ -86,8 +106,8 @@ export default {
     navItems() {
       return this.$store.state.navItems;
     },
-    contextAppBar() {
-      return this.$store.state.contextAppBar;
+    appBar() {
+      return this.$store.state.appBar;
     },
     copyright() {
       return aboutInfo.copyright;