navigation bar

components/PageCarousels.vue

+<template>
+  <v-carousel
+    cycle
+    height="550"
+    hide-delimiter-background
+    show-arrows-on-hover
+  >
+    <v-carousel-item
+      v-for="(slide, i) in slides"
+      :key="i"
+      :src="img[i]"
+    >
+      <v-row
+        class="fill-height"
+        align="center"
+        justify="center"
+      >
+        <div class="text-h2">
+          {{ slide }} Slide
+        </div>
+      </v-row>
+    </v-carousel-item>
+  </v-carousel>
+</template>
+
+<script>
+export default {
+  name: 'PageCarousels',
+  data () {
+    return {
+      img: [
+        'https://d-themes.com/html/riode/images/demos/demo1/slides/slide1.jpg',
+        'https://d-themes.com/html/riode/images/demos/demo1/slides/slide2.jpg'
+      ],
+      slides: [
+        'First',
+        'Second'
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

components/user/Header.vue

@@ -202,45 +202,7 @@
     <!-- end header middle -->
     <!-- header bottom -->
     <div class="header-bottom">
-      <v-container>
-        <div class="navbar d-flex justify-space-between col-md-7">
-          <div>
-            <span>
-              Home
-            </span>
-          </div>
-          <div>
-            <span>
-              Categories
-            </span>
-          </div>
-          <div>
-            <span>
-              Products
-            </span>
-          </div>
-          <div>
-            <span>
-              Pages
-            </span>
-          </div>
-          <div>
-            <span>
-              Elements
-            </span>
-          </div>
-          <div>
-            <span>
-              Blogs
-            </span>
-          </div>
-          <div>
-            <span>
-              About
-            </span>
-          </div>
-        </div>
-      </v-container>
+      <NavBar />
     </div>
     <!-- end header bottom -->
 
@@ -300,12 +262,14 @@
 <script>
 import LoginModal from '~/components/LoginModal.vue'
 import SignupModal from '~/components/RegisterModal.vue'
+import NavBar from '~/components/user/NavBar'
 
 export default {
   name: 'UserHeader',
   components: {
     LoginModal,
-    SignupModal
+    SignupModal,
+    NavBar
   },
   data: () => {
     return {
@@ -371,14 +335,6 @@ export default {
   .v-application .d-flex {
     align-items: center;
   }
-  .navbar span {
-    font-weight: bold;
-    cursor: pointer;
-    transition: 0.3s;
-  }
-  .navbar span:hover {
-    color: #26c;
-  }
   .favorite-modal {
     position: fixed;
   }

components/user/NavBar.vue

+<template>
+  <v-container>
+    <div class="navbar d-flex justify-space-between col-md-7">
+      <div>
+        <span>
+          Home
+        </span>
+      </div>
+      <div class="dropdown">
+        <span>
+          Products
+        </span>
+        <v-icon>mdi-chevron-down</v-icon>
+        <div class="dropdown-content">
+          <v-treeview
+            :active.sync="active"
+            rounded
+            dense
+            hoverable
+            activatable
+            :items="categories"
+          />
+        </div>
+      </div>
+      <div>
+        <span>
+          Pages
+        </span>
+      </div>
+      <div>
+        <span>
+          Blogs
+        </span>
+      </div>
+      <div>
+        <span>
+          About
+        </span>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'NavBar',
+  data: () => ({
+    active: [],
+    open: [],
+    categories: []
+  }),
+
+  computed: {
+    selected () {
+      if (!this.active.length) { return undefined }
+      const id = this.active[0]
+      console.log(id)
+      return this.categories.find(category => category.id === id)
+    }
+  },
+
+  watch: {
+    selected () {
+      if (!this.active.length) { return undefined }
+      const id = this.active[0]
+      return id
+    }
+  },
+
+  created () {
+    this.$axios
+      .get('guest/categories/index')
+      .then((response) => {
+        this.categories = response.data.data
+      })
+      .catch(function (error) {
+        console.log(error)
+      })
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  .navbar span {
+    font-weight: bold;
+    cursor: pointer;
+    transition: 0.3s;
+  }
+  .navbar span:hover {
+    color: #26c;
+  }
+  .dropdown {
+    position: relative;
+  }
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    background-color: #ffffff;
+    min-width: 350px;
+  }
+</style>
+
+<style>
+  div .v-treeview-node__label {
+    cursor: pointer;
+  }
+</style>

pages/home-page/index.vue

 <template>
-  <div>this is body</div>
+  <div>
+    <!-- Banners -->
+    <PageCarousels />
+  </div>
 </template>
 
 <script>
+import PageCarousels from '@/components/PageCarousels'
+
 export default {
-  layout: 'user'
+  layout: 'user',
+  component: {
+    PageCarousels
+  }
 }
 </script>