ShowEasyFrontEnd/FrontEnd/components/dropdown/serviceList.vue

<template>
  <div class="serviceList">
    <ul class="service_dropdown tw-w-full">
      <li class="tw-mb-[27px]">
        <div :class="[
          'tw-grid tw-grid-cols-[30px_224px] tw-items-center tw-gap-[10px] ',
          'newdrawer_arrow',
        
          show ? 'show' : 'hide',
        ]" @click="showCategory(serviceIndex)">
          <img v-if="serviceListIcon !== undefined" :src="require(`@/assets/svg/${serviceListIcon}.svg`)" alt=""
            class="tw-mx-auto" />
          <div v-else></div>
          <div :class="[
            'tw-head-body tw-text-neutrals-800',
            show == true ? 'tw-text-primary-1' : '',
          ]">
            {{ servicecategory.CategoryName }}
          </div>
        </div>
        <template v-for="(title, index) in servicecategory.SubCategoryList">
        <ul class="tw-pl-[40px] tw-mt-[16px]" v-if="show"
          :key="index">
          <nuxt-link :to="localePath('/service?subcategory=' + title.CategoryID)">
            <li class="tw-head-body tw-mb-[15px] tw-text-neutral-800">
              {{ title.CategoryName }}
            </li>
          </nuxt-link>
        </ul>
        </template>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      activeIndex: "",
    };
  },
  props: {
    servicecategory: {
      type: Object,
    },
    serviceListIcon: {
      type: String,
    },
    serviceActiveIndex: "",
    serviceIndex: "",
  },
  watch: {
    serviceActiveIndex: {
      handler: function () {
        if (this.serviceActiveIndex == true) {
          this.show = true;
        } else {
          this.show = false;
        }
      },
    },
  },
  methods: {
    showCategory(data) {
      this.activeIndex = data;
      this.$emit("activeIndex", this.activeIndex);
      this.show = !this.show;
    },
  },
};
</script>
<style lang="scss" scoped>
ul {
  list-style-type: none;
  padding: 0;
}

.newdrawer_arrow {
  position: relative;

  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: auto;
    margin-bottom: auto;
    background-image: url("~/assets/svg/newdrawer_arrow.svg");
    background-size: 100%;
    background-position: right center;
    background-repeat: no-repeat;
    width: 10px;
    height: 6px;
    transition: all 0.2s linear;
  }

  &.show {
    &::after {
      background-image: url("~/assets/svg/newDrawer_uparrow.svg");
    }
  }
}
</style>