ShowEasyFrontEnd/FrontEnd/components/service/content/sideBarMenu.vue

<template>
  <div class="tw-sticky tw-top-[172px]">
    <div :class="['tw-w-full tw-flex tw-flex-col']">
      <template v-for="(item, index) in fixBarList">
      <a :key="index" v-if="item.show" :class="[
        'crollactive-item xl:tw-mb-[34px] tw-body-2 tw-text-base-tertiary hover:tw-text-primary-default tw-transition-all tw-ease-in-out',
        step == item.id
          ? 'active tw-text-black tw-font-bold title-icon-left'
          : 'tw-text-base-tertiary',
      ]" href="#" v-scroll-to="{
  el: `#${item.id}`,
  offset: -150,
}" @click="activeStep(item.id)">{{ $t(item.title) }}</a></template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    fixBarList: {
      type: Array,
    },
    currStep: {
      type: String,
    },
  },
  data() {
    return {
      step: '',
      click: false,
    }
  },
  watch: {
    currStep: {
      handler: function () {
        if (!this.click) {
            this.step = this.currStep;
          }
      }
    }
  },
  methods: {
    activeStep(id) {
      this.click = true;
      this.step = id;
      setTimeout(() => {
        this.click = false;
      }, 300)
    }
  }
};
</script>
<style lang="scss" scoped>

</style>