update navbar ui

components/Navbar.vue

+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div>
     <v-toolbar
@@ -10,37 +11,75 @@
       <v-toolbar-title>
         <v-btn href="/users">
           <span>USER</span>
-          <v-icon dense>mdi-account</v-icon>
+          <v-icon dense>
+            mdi-account
+          </v-icon>
         </v-btn>
 
         <v-btn href="/categories">
           <span>CATEGORY</span>
-          <v-icon dense>mdi-heart</v-icon>
+          <v-icon dense>
+            mdi-heart
+          </v-icon>
         </v-btn>
 
         <v-btn href="/products">
           <span>PRODUCT</span>
-          <v-icon dense> mdi-briefcase</v-icon>
+          <v-icon dense>
+            mdi-briefcase
+          </v-icon>
         </v-btn>
 
         <v-btn href="/posts">
           <span>POST</span>
-          <v-icon dense>mdi-newspaper</v-icon>
+          <v-icon dense>
+            mdi-newspaper
+          </v-icon>
         </v-btn>
       </v-toolbar-title>
 
       <v-spacer />
 
-      <v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title>
-
-      <v-btn icon @click="logout">
-        <v-icon>mdi-export</v-icon>
+      <v-toolbar-title class="profile">
+        {{ $auth.$storage.getUniversal("userName") }}
+      </v-toolbar-title>
+      <div class="text-center">
+        <v-menu offset-y>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              icon
+              dark
+              v-bind="attrs"
+              v-on="on"
+            >
+              <v-icon>mdi-menu-down</v-icon>
             </v-btn>
+          </template>
+          <v-list>
+            <v-list-item-group
+              v-model="selectedItem"
+              color="primary"
+            >
+              <v-list-item
+                @click="logout()"
+              >
+                <v-list-item-icon>
+                  <v-icon>
+                    mdi-logout
+                  </v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>
+                  Logout
+                </v-list-item-title>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-menu>
+      </div>
     </v-toolbar>
   </div>
 </template>
 <script>
-
 export default {
   methods: {
     logout () {
@@ -63,3 +102,12 @@ export default {
   }
 }
 </script>
+<style scoped>
+.v-toolbar--prominent:not(.v-toolbar--bottom) .v-toolbar__title.profile {
+  align-self: baseline;
+  padding-top: 5px;
+}
+.v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
+    margin-right: 15px;
+}
+</style>