ShowEasyFrontEnd/FrontEnd/components/dropdown/exhibitionList.vue

<template>
  <div class="exhibitionList">
    <ul class="exhibition_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(exhibitionIndex)">
          <img v-if="exhibitionListIcon !== undefined"
            :src="require(`@/assets/img/CategoryIcon/${exhibitionListIcon}.png`)" alt="" class="tw-mx-auto" />
          <div :class="[
            'tw-head-body tw-text-neutrals-800',
            show == true ? 'tw-text-primary-1' : '',
          ]">
            {{ exhibitionCategory.CategoryName }}
          </div>
        </div>
        <template v-for="(title, index) in exhibitionCategory.SubCategoryList">        
          <ul :class="['tw-pl-[40px] tw-mt-[16px]']" v-if="show" 
          :key="index">
          <nuxt-link :to="localePath('/exhibition?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,
    };
  },
  props: {
    exhibitionCategory: {
      type: Object,
    },

    exhibitionListIcon: {
      type: String,
    },
    exhibitionsActiveIndex: "",
    exhibitionIndex: "",
  },

  watch: {
    exhibitionsActiveIndex: {
      handler: function () {
        if (this.exhibitionsActiveIndex == 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>