added sub category in category items pages

assets/css/aside.css

@@ -0,0 +1,45 @@
+.category-aside {
+ width: 100%;
+ min-height: 77vh;
+ box-shadow: 0 12px 12px 0 hsl(0deg 0% 71% / 11%);
+ border: 1px solid #dedede;
+ border-radius: 8px;
+ }
+ .active-category {
+ color: rgba(0, 0, 0, .85);
+ background-color: #00dc82;
+ }
+ .btn-toggle {
+ display: inline-flex;
+ align-items: center;
+ padding: .25rem .5rem;
+ font-weight: 600;
+ color: rgba(0, 0, 0, .65);
+ background-color: transparent;
+ border: 0;
+ }
+ .btn-toggle:hover,
+ .btn-toggle:focus {
+ color: rgba(0, 0, 0, .85);
+ background-color: #d2f4ea;
+ }
+
+ .btn-toggle[aria-expanded="true"] {
+ color: rgba(0, 0, 0, .85);
+ }
+
+ .btn-toggle-nav a {
+ display: inline-flex;
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
+ margin-left: 1.25rem;
+ text-decoration: none;
+ }
+ .sub-category{
+ margin-left: 1.75rem !important;
+ }
+ .btn-toggle-nav a:hover{
+ background-color: #d2f4ea;
+ }
+
+ .fw-semibold { font-weight: 600; }

components/aside/asideLayout.vue

@@ -0,0 +1,10 @@
+<template>
+ <aside class="category-aside flex-shrink-0 p-3 bg-white">
+ <div class="fs-5 fw-semibold pb-3 mb-3 border-bottom">Result Categories</div>
+ <ul class="list-unstyled ps-0">
+ <slot name="beforeDivider"></slot>
+ <li class="border-top my-3"></li>
+ <slot name="afterDivider"></slot>
+ </ul>
+ </aside>
+</template>

components/aside/collapseItem.vue

@@ -0,0 +1,37 @@
+<template>
+ <li class="mb-1">
+ <b-button
+ variant="light"
+ class="btn-toggle"
+ :v-b-toggle="id"
+ @click="collapse = !collapse"
+ >
+ <b-icon :icon="collapse ? 'chevron-down' : 'chevron-right'"></b-icon>
+ {{name}}
+ </b-button>
+ <b-collapse :visible="collapse" :id="id">
+ <ul class="btn-toggle-nav list-unstyled pb-1 small">
+ <li v-for="(i, key) in items" :key="key">
+ <nuxt-link
+ :to="i.route"
+ exact
+ exact-active-class="active-category"
+ class="link-dark rounded"
+ >
+ {{ key }}
+ </nuxt-link>
+ </li>
+ </ul>
+ </b-collapse>
+ </li>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ collapse: this.visible,
+ };
+ },
+ props:{name:String,visible:Boolean,id:String,items:Object}
+};
+</script>

components/aside/item.vue

@@ -0,0 +1,15 @@
+<template>
+ <li class="mb-1">
+ <nuxt-link
+ :to="route"
+ class="btn btn-toggle align-items-center rounded collapsed"
+ >
+ {{ name }}
+ </nuxt-link>
+ </li>
+</template>
+<script>
+export default {
+ props: {name:String, route:String},
+};
+</script>

components/category.vue

@@ -0,0 +1,48 @@
+<template>
+ <div class="category w-100 bg-white">
+ <h4 class="mb-4 font-weight-bold">Category</h4>
+ <div class="d-flex flex-wrap">
+ <nuxt-link v-for="(i,key) in products" :key="key" :to="subRoute+key" class="category-item d-flex flex-column justify-content-center align-items-center mx-4">
+ <div class="category-item_img">
+ <img :src="i.cover" :alt="key">
+ </div>
+ <div class="font-weight-bold link-dark">
+ {{key}}
+ </div>
+ </nuxt-link>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ props:{products:Object,subRoute:String}
+}
+</script>
+<style lang="scss" scoped>
+.category{
+ border-radius: 8px;
+ border: 1px solid #ededed;
+ padding: 16px 24px 24px;
+ margin-bottom: 24px;
+ box-shadow: 0 1px 4px 0 rgb(0 0 0 / 3%);
+ a{
+ text-decoration: none;
+ }
+ &-item{
+ width: calc((100% - 112px)/8);
+ background-color: #f0f0f1;
+ border-radius: 8px;
+ padding: 16px 8px;
+ box-shadow: 0 1px 4px 0 rgb(0 0 0 / 3%);
+ &_img{
+ max-width: 96px;
+ height: 60px;
+ img{
+ width: 100%;
+ height:100%;
+ object-fit: contain;
+ }
+ }
+ }
+}
+</style>

nuxt.config.js

@@ -23,7 +23,7 @@ export default {
  css: [
  '@/assets/css/swiper.css',
  '@/node_modules/swiper/swiper-bundle.css',
- '@/assets/css/header.css'
+ '@/assets/css/aside.css'
  ],
 
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

pages/Products/Beauty.vue

@@ -0,0 +1,32 @@
+<template>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-2">
+ <asideLayout>
+ <div slot="beforeDivider">
+ <item name="Digital products" :route="beautyCategories.route" />
+ <collapseItem name="Products" :visible=true id="collapse-2" :items="beautyCategories.products" />
+ </div>
+ </asideLayout>
+ </div>
+ <div class="col-10">
+ <nuxt-child />
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import collapseItem from '@/components/aside/collapseItem.vue';
+import item from '@/components/aside/item.vue';
+export default {
+ computed: {
+ beautyCategories() {
+ return this.$store.state.categories.allCategories['Beauty and health'];
+ },
+ },
+ components:{
+ collapseItem,
+ item
+ }
+};
+</script>

pages/Products/Beauty/health.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>

pages/Products/Beauty/makeup.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>

pages/Products/Digital.vue

@@ -0,0 +1,32 @@
+<template>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-2">
+ <asideLayout>
+ <div slot="beforeDivider">
+ <item name="Digital products" :route="digitalCategories.route" />
+ <collapseItem name="Products" :visible=true id="collapse-2" :items="digitalCategories.products" />
+ </div>
+ </asideLayout>
+ </div>
+ <div class="col-10">
+ <nuxt-child />
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import collapseItem from '@/components/aside/collapseItem.vue';
+import item from '@/components/aside/item.vue';
+export default {
+ computed: {
+ digitalCategories() {
+ return this.$store.state.categories.allCategories['Digital products'];
+ },
+ },
+ components:{
+ collapseItem,
+ item
+ }
+};
+</script>

pages/Products/Digital/laptop.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>

pages/Products/Digital/mobile.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>

pages/Products/Fashion.vue

@@ -0,0 +1,32 @@
+<template>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-2">
+ <asideLayout>
+ <div slot="beforeDivider">
+ <item name="Digital products" :route="fashionCategories.route" />
+ <collapseItem name="Products" :visible=true id="collapse-2" :items="fashionCategories.products" />
+ </div>
+ </asideLayout>
+ </div>
+ <div class="col-10">
+ <nuxt-child />
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import collapseItem from '@/components/aside/collapseItem.vue';
+import item from '@/components/aside/item.vue';
+export default {
+ computed: {
+ fashionCategories() {
+ return this.$store.state.categories.allCategories['Fashion and clothing'];
+ },
+ },
+ components:{
+ collapseItem,
+ item
+ }
+};
+</script>

pages/Products/Fashion/female.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>

pages/Products/Fashion/male.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>

pages/Products/House.vue

@@ -0,0 +1,32 @@
+<template>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-2">
+ <asideLayout>
+ <div slot="beforeDivider">
+ <item name="Digital products" :route="houseCategories.route" />
+ <collapseItem name="Products" :visible=true id="collapse-2" :items="houseCategories.products" />
+ </div>
+ </asideLayout>
+ </div>
+ <div class="col-10">
+ <nuxt-child />
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import collapseItem from '@/components/aside/collapseItem.vue';
+import item from '@/components/aside/item.vue';
+export default {
+ computed: {
+ houseCategories() {
+ return this.$store.state.categories.allCategories['House'];
+ },
+ },
+ components:{
+ collapseItem,
+ item
+ }
+};
+</script>

pages/Products/House/cleaning.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>

pages/Products/House/video-audio.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+
+ </div>
+</template>