vue navbar changes

cateditor/src/components/Navbar.vue

@@ -1,30 +1,68 @@
 <template>
   <v-toolbar dark dense absolute app color="keen_dark_grey">
-    <v-toolbar-title color="primary" class="headline text-uppercase">
+    <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
+    <img src="/static/img/keen_logo.svg" width="85"/>
+    <v-toolbar-title color="primary" class="headline">
       <span>ProCatalog</span>
-      <span class="font-weight-light"> Catalog Editor</span>
+      <span class="font-weight-light">&nbsp;{{ pageTitle }}</span>
     </v-toolbar-title>
     <v-spacer></v-spacer>
     <v-toolbar-items class="hidden-sm-and-down">
-      <v-btn
+      <v-btn flat small href="/">Dashboard</v-btn>
-          flat
+
-          href="https://github.com/vuetifyjs/vuetify/releases/latest"
+      <v-menu open-on-hover bottom offset-y>
-          target="_blank"
+        <template v-slot:activator="{ on }">
-      >Dashboard</v-btn>
+          <v-btn flat small v-on="on">Support</v-btn>
-      <v-btn flat>Link Two</v-btn>
+        </template>
-      <v-btn flat>Link Three</v-btn>
+        <v-list class="navbar-menu ma-0 pa-0">
+          <v-list-tile dense class="navbar-menu-item">
+            <v-btn flat small href="/catalog/new" class="navbar-menu-button">Email Support</v-btn>
+          </v-list-tile>
+        </v-list>
+      </v-menu>
+
+      <v-menu open-on-hover bottom offset-y>
+        <template v-slot:activator="{ on }">
+          <v-btn flat small v-on="on">
+            Account
+          </v-btn>
+        </template>
+        <v-list class="navbar-menu ma-0 pa-0">
+          <v-list-tile dense class="navbar-menu-item">
+            <v-btn flat small href="/account/settings" class="navbar-menu-button">Profile</v-btn>
+          </v-list-tile>
+          <v-list-tile dense class="navbar-menu-item">
+            <v-btn flat small href="/account/logout" class="navbar-menu-button">Log Out</v-btn>
+          </v-list-tile>
+        </v-list>
+      </v-menu>
+
     </v-toolbar-items>
   </v-toolbar>
 </template>
 
 <script>
 export default {
+  props: ['pageTitle'],
   data: () => ({
     foo: true
   })
 }
 </script>
 
-<style>
+<style scoped>
+.navbar-menu {
+  background-color: #373737;
+  margin: 0;
+  padding: 0;
+}
 
+.navbar-menu-item {
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-menu-button {
+  color: white;
+}
 </style>

cateditor/src/pages/editor/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <Navbar/>
+    <Navbar page-title="Editor"/>
     <v-content>
       <CatalogEditor/>
       <!-- <AddProductDialog value/> -->

cateditor/src/pages/list/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <Navbar/>
+    <Navbar page-title="Catalog List"/>
     <v-content>
       <CatalogList/>
     </v-content>
@@ -17,11 +17,8 @@ export default {
     Navbar,
     CatalogList,
   },
-  data () {
+  data: () => ({
-    return {
+  }),
-      //
-    }
-  }
 }
 </script>