add paginate number

components/DetailModal.vue

@@ -243,7 +243,7 @@ export default {
 .modal-title {
   font-size: 30px;
   font-weight: bold;
-  margin-left:-30px;
+  margin-left:-22px;
   margin-top:10px;
 }
 .hex-variant {

pages/home-page/categories/_id.vue

@@ -6,12 +6,20 @@
     <BreadCrumb :items="breadcrumbItems" />
     <v-container class="pa-0">
       <v-row class="d-flex align-center pl-2 mt-2">
-        <v-col>
+        <v-col class="d-flex align-center">
           <v-hover v-slot="{ hover }">
             <v-btn outlined :style="{ 'background-color': hover ? '#1976d2' : '#f5f5f5','color':hover ? '#f5f5f5' : 'black' }">
-              FILTER
+              SHOW
             </v-btn>
           </v-hover>
+          <v-col md="1">
+            <v-select
+              v-model="itemsPerPage"
+              :items="numberPage"
+              item-text="name"
+              item-value="id"
+            />
+          </v-col>
         </v-col>
       </v-row>
       <v-row class="pt-5 pb-5">
@@ -166,7 +174,21 @@ export default {
       },
       itemsPerPage: 8,
       currentPage: 1,
-      wishlish: []
+      wishlish: [],
+      numberPage: [
+        {
+          name: '4',
+          id: 4
+        },
+        {
+          name: '8',
+          id: 8
+        },
+        {
+          name: '12',
+          id: 12
+        }
+      ]
     }
   },
   computed: {