ayanova/src/App.vue

@@ -19,42 +19,51 @@
         <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-menu bottom left>
-        <template v-slot:activator="{ on }">
-          <v-btn dark icon v-on="on">
-            <v-icon>fa-ellipsis-v</v-icon>
+      <v-toolbar-items>
+        <template v-for="(item) in appBar.menuItems">
+          <v-btn
+            class="hidden-sm-and-down"
+            right
+            flat
+            icon
+            v-if="item.surface"
+            :key="item.key"
+            :disabled="item.disabled"
+            @click="$gzevent.$emit('menu-click',item)"
+          >
+            <v-icon :color="item.color?item.color:''">{{ "fa-" + item.icon }}</v-icon>
           </v-btn>
         </template>
-        <v-list>
-          <template v-for="(item,index) in appBar.menuItems">
-            <v-subheader v-if="item.header" :key="index">{{ 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.key"
-              :disabled="item.disabled"
-              @click="$gzevent.$emit('menu-click',item)"
-            >
-              <v-list-tile-action>
-                <v-icon v-if="item.icon" :color="item.color?item.color:''">{{ "fa-" + item.icon }}</v-icon>
-              </v-list-tile-action>
-              <v-list-tile-content>
-                <v-list-tile-title>
-                  <span>{{ item.title }}</span>
-                </v-list-tile-title>
-              </v-list-tile-content>
-            </v-list-tile>
+        <v-spacer></v-spacer>
+        <v-menu bottom left>
+          <template v-slot:activator="{ on }">
+            <v-btn flat dark icon v-on="on">
+              <v-icon>fa-ellipsis-v</v-icon>
+            </v-btn>
           </template>
-        </v-list>
-      </v-menu>
+          <v-list>
+            <template v-for="(item,index) in appBar.menuItems">
+              <v-subheader v-if="item.header" :key="index">{{ 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.key"
+                :disabled="item.disabled"
+                @click="$gzevent.$emit('menu-click',item)"
+              >
+                <v-list-tile-action>
+                  <v-icon v-if="item.icon" :color="item.color?item.color:''">{{ "fa-" + item.icon }}</v-icon>
+                </v-list-tile-action>
+                <v-list-tile-content>
+                  <v-list-tile-title>
+                    <span>{{ item.title }}</span>
+                  </v-list-tile-title>
+                </v-list-tile-content>
+              </v-list-tile>
+            </template>
+          </v-list>
+        </v-menu>
+      </v-toolbar-items>
     </v-toolbar>
     <v-content>
       <v-container fluid fill-height>