add change

components/user/Header.vue

-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div>
     <!-- header top -->

pages/home-page/categories/index.vue

+<!-- eslint-disable vue/no-v-for-template-key -->
+<!-- eslint-disable vue/html-end-tags -->
+<!-- eslint-disable vue/no-unused-vars -->
+<template>
+  <div>
+    <BreadCrumb />
+    <v-container class="pa-0">
+      <v-row class="d-flex align-center pl-2 mt-2">
+        <v-col>
+          <v-hover v-slot="{ hover }">
+            <v-btn outlined :style="{ 'background-color': hover ? '#1976d2' : '#f5f5f5','color':hover ? '#f5f5f5' : 'black' }">
+              FILTER
+            </v-btn>
+          </v-hover>
+        </v-col>
+      </v-row>
+      <v-row class="pt-5 pb-5">
+        <v-col
+          v-for="(item, i) in items"
+          :key="i"
+          cols="12"
+          md="3"
+        >
+          <v-hover
+            v-slot="{ hover }"
+            :elevation="hover ? 12 : 2"
+            :class="{ 'on-hover': hover }"
+          >
+            <v-card
+              :elevation="hover ? 16 : 2"
+              :class="{ 'on-hover': hover }"
+              class="mx-auto pa-2 ma-3"
+              max-width="280"
+              link
+            >
+              <div>
+                <v-img
+                  :src="item.images"
+                  height="250px"
+                  cover
+                />
+              <!-- <v-card-actions v-if="hover" class="d-flex align-center justify-center" style="position: absolute">
+                <v-btn
+                  v-for="(icon, index) in icons"
+                  :key="index"
+                  :class="{ 'show-btns': hover }"
+                  icon
+                >
+                  <v-icon
+                    :class="{ 'show-btns': hover }"
+                  >
+                    {{ icon }}
+                  </v-icon>
+                </v-btn>
+              </v-card-actions> -->
+              </div>
+              <v-card-title class="d-flex justify-center">
+                {{ item.name }}
+              </v-card-title>
+              <v-card-subtitle class="d-flex justify-center">
+                {{ item.price }}
+              </v-card-subtitle>
+              <v-card-actions class="d-flex justify-center">
+                <v-btn
+                  :class="{ 'show-btns': hover }"
+                  icon
+                >
+                  <v-icon
+                    :class="{ 'show-btns': hover }"
+                  >
+                    mdi-cart
+                  </v-icon>
+                </v-btn>
+                <v-btn
+                  :class="{ 'show-btns': hover }"
+                  icon
+                >
+                  <v-icon
+                    :class="{ 'show-btns': hover }"
+                  >
+                    mdi-heart
+                  </v-icon>
+                </v-btn>
+                <v-btn
+                  :class="{ 'show-btns': hover }"
+                  icon
+                >
+                  <v-icon
+                    :class="{ 'show-btns': hover }"
+                  >
+                    mdi-magnify
+                  </v-icon>
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-hover>
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="d-flex align-center justify-space-between pl-2 mt-2">
+        <div class="text-center">
+          <v-pagination
+            v-model="page"
+            :length="4"
+            prev-icon="mdi-menu-left"
+            next-icon="mdi-menu-right"
+          />
+        </div>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import BreadCrumb from '@/components/BreadCrumb'
+
+export default {
+  components: { BreadCrumb },
+  layout: 'user',
+  component: {
+    BreadCrumb
+  },
+  data: () => {
+    return {
+      items: [
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        },
+        {
+          images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+          name: 'Brunch this weekend?',
+          price: '50$'
+        }
+      ],
+      icons: ['mdi-cart', 'mdi-heart', 'mdi-magnify'],
+      products: [],
+      page: 1
+    }
+  },
+  created () {
+    this.getProductByCategoryId()
+  },
+  methods: {
+    async getProductByCategoryId () {
+      const resp = await this.$axios.get('/guest/categories/products-by-category-id/1', {
+        headers: {
+          Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+        }
+      })
+        .then(response => (this.products = response.data.data[0].products))
+        .catch(function (error) {
+          console.log(error)
+        })
+      console.log(resp[0].products)
+      console.log(this.products[0])
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.v-card {
+    transition: opacity .4s ease-in-out;
+  }
+
+  .v-card:not(.on-hover) {
+    opacity: 0.9;
+  }
+
+  .show-btns {
+    color: #1976d2 !important;
+  }
+  .mdi-fast-forward::before {
+    content: "\F0211";
+}
+.mdi:before, .mdi-set {
+    display: inline-block;
+    font: normal normal normal 24px/1 "Material Design Icons";
+    font-size: inherit;
+    text-rendering: auto;
+    line-height: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+::before, ::after {
+    text-decoration: inherit;
+    vertical-align: inherit;
+}
+*, ::before, ::after {
+    background-repeat: no-repeat;
+    box-sizing: inherit;
+}
+.v-btn--icon.v-size--default .v-icon, .v-btn--fab.v-size--default .v-icon {
+    height: 24px;
+    font-size: 24px;
+    width: 24px;
+}
+.v-btn > .v-btn__content .v-icon {
+    color: rgba(255, 255, 255, 1);
+}
+</style>