fix admin navbar

components/Navbar.vue

 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div>
-    <v-toolbar
-      dark
-      prominent
-      src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
+    <v-navigation-drawer
+      v-model="drawer"
+      :mini-variant="miniVariant"
+      :clipped="clipped"
+      fixed
+      app
     >
-      <v-app-bar-nav-icon />
-
+      <v-list>
+        <v-list-item
+          v-for="(item, i) in items"
+          :key="i"
+          :to="item.to"
+          router
+          exact
+        >
+          <v-list-item-action>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+    <v-app-bar
+      class="navbar"
+      :clipped-left="clipped"
+      fixed
+      app
+    >
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+      <v-btn
+        icon
+        @click.stop="miniVariant = !miniVariant"
+      >
+        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
+      </v-btn>
       <v-toolbar-title>
-        <v-btn to="/users">
-          <span>USER</span>
-          <v-icon dense>
-            mdi-account
-          </v-icon>
-        </v-btn>
-
-        <v-btn to="/categories">
-          <span>CATEGORY</span>
-          <v-icon dense>
-            mdi-heart
-          </v-icon>
-        </v-btn>
-
-        <v-btn to="/products">
-          <span>PRODUCT</span>
-          <v-icon dense>
-            mdi-briefcase
-          </v-icon>
-        </v-btn>
-
-        <v-btn to="/posts">
-          <span>POST</span>
-          <v-icon dense>
-            mdi-newspaper
-          </v-icon>
-        </v-btn>
-
-        <v-btn to="/home-page">
-          <span>HOME PAGE</span>
-          <v-icon dense>
-            mdi-home
-          </v-icon>
-        </v-btn>
+        <router-link class="navbar-title" to="/home-page" target="_blank">
+          {{ title }}
+        </router-link>
       </v-toolbar-title>
-
       <v-spacer />
-
       <v-toolbar-title class="profile">
         {{ $auth.$storage.getUniversal("userName") }}
       </v-toolbar-title>
@@ -82,11 +79,40 @@
           </v-list>
         </v-menu>
       </div>
-    </v-toolbar>
+    </v-app-bar>
   </div>
 </template>
 <script>
 export default {
+  data () {
+    return {
+      drawer: false,
+      items: [
+        {
+          icon: 'mdi-account',
+          title: 'User',
+          to: '/users'
+        },
+        {
+          icon: 'mdi-heart',
+          title: 'Categories',
+          to: '/categories'
+        },
+        {
+          icon: 'mdi-briefcase',
+          title: 'Products',
+          to: '/products'
+        },
+        {
+          icon: 'mdi-newspaper',
+          title: 'Posts',
+          to: '/posts'
+        }
+      ],
+      miniVariant: false,
+      title: 'Homepage'
+    }
+  },
   mounted () {
     console.log('123')
   },
@@ -124,4 +150,10 @@ export default {
 .v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
     margin-right: 15px;
 }
+.navbar {
+  background: url('https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg');
+}
+.navbar-title {
+  text-decoration: none;
+}
 </style>