ShowEasyFrontEnd/FrontEnd/components/newComponent/sidebar/CustomScrollActive.vue

<template>
  <div class="CustomSrollActive-wrapper">
    <scrollactive
      ref="scrollactive"
      active-class="active"
      :offset="offset"
      :scrollOffset="offset"
      class="my-nav"
    >
    <template v-for="(item, index) in list">
      <a
        :key="index"
        v-if="item.isShow"
        :href="item.url"
        class="scrollactive-item"
        >{{ $t(item.name) }}</a
      ></template>
    </scrollactive>
  </div>
</template>

<script>
  export default {
    name: "CustomScrollActive",
    props: {
      list: {
        type: Array,
      },
    },
    data: () => ({
      offset: 140,
      scrollOffset: 140,
    }),
    methods: {},
    mounted() {
      if (this.$vuetify.breakpoint.smAndUp) {
        this.offset = 140;
        this.scrollOffset = 140;
      } else {
        this.offset = 120;
        this.scrollOffset = 120;
      }
    },
  };
</script>
<style lang="scss" scoped>
  .CustomSrollActive-wrapper {
    width: 100%;
    overflow: hidden;
  }
  .my-nav {
    display: flex;
    background-color: transparent;
  }
  .my-nav a.scrollactive-item {
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: $Neutrals-300;
    padding: 18px 10px;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    margin-right: 8px;
    transition: all 0.3s liner;
  }
  .my-nav a.scrollactive-item.active {
    font-weight: 700;
    color: $primary-orange;
    transition: all 0.3s liner;
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 4px;
      border-radius: 10px;
      background-color: $primary-orange;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  @media (min-width: 1366px) {
    .my-nav {
      flex-direction: column;
      background-color: transparent;
    }
    .my-nav a.scrollactive-item {
      color: $Neutrals-300;
      padding: 12px 20px 12px 10px;
      margin-right: 0;
      margin-bottom: 10px;
    }
    .my-nav a.scrollactive-item.active {
      background-image: url("~/assets/img/Highlight.png");
      background-size: 18px 8px;
      background-position: left 10px center;
      padding-left: 58px;
      color: $Neutrals-500;
      &::after {
        display: none;
      }
    }
  }
</style>