MenuAchorLinks.vue

<template>
  <button
    v-if="shouldShowLeftArrow"
    class="absolute left-0 hidden size-16 filter-nav-left text-burnt-sienna lg:flex"
    aria-label="scroll left"
    @click="scroll('left')"
  >
    <ArrowLeftIcon class="m-auto size-4" />
  </button>
  <div
    id="drag-container"
    ref="containerRef"
    class="flex items-center h-16 px-6 overflow-auto lg:pl-8 whitespace-nowrap no-scrollbar"
  >
    <slot name="extra" />
    <button
      v-for="(tag, index) in titles"
      :key="tag"
      :ref="setButtonRef"
      class="relative inline-flex items-center justify-center h-full px-3 text-sm capitalize group hover:lg:text-terracota-dark"
      :class="{
        'pl-0 xl:pl-3': index === 0,
        [activeIndex === index ? 'text-terracota-dark' : 'text-burnt-sienna']: true,
      }"
      @click="goToSection(tag)"
    >
      {{ tag }}
    </button>
    <div class="underline" :style="underlineStyle" />
  </div>
  <button
    v-if="shouldShowRightArrow"
    class="absolute right-0 hidden lg:flex size-16 filter-nav-right text-burnt-sienna"
    aria-label="scroll right"
    @click="scroll('right')"
  >
    <ArrowRightIcon class="m-auto size-4" />
  </button>
</template>

<script lang="ts" setup>
  import { ArrowRightIcon, ArrowLeftIcon } from '@heroicons/vue/solid';
  import useNavigationArrows from '@/composables/useNavigationArrows';
  import { MenuType } from '@/utils/types';
  import { sectionTitles } from '@/constants/menus';
  import useConsoleLog from '@/composables/useConsoleLog';
  import useAnimation from '@/composables/useAnimation';

  interface Props {
    sections: Array<keyof typeof sectionTitles>;
    menuType?: MenuType;
  }

  const props = defineProps<Props>();

  const { activeKey } = useAnimation();

  const containerRef = ref<HTMLElement | null>();

  const titles = computed(() => {
    return props.sections.map((section: string) => section.replace('section-', ''));
  });

  const activeIndex = ref(-1);
  const buttonRefs = ref<(HTMLElement | null)[]>([]);
  const buttonXPositions = ref<{ x: number; width: number }[]>([]);

  onMounted(() => {
    const elements = buttonRefs.value.map(section => section);
    buttonXPositions.value = elements
      .filter(el => el)
      .map(element => {
        const { width, x, height } = element!.getBoundingClientRect();
        console.log('=======>', height);
        return { width, x };
      });
    console.log('=======>SSS', buttonXPositions.value);
  });

  const activeIndexX = computed(() => {
    if (activeKey.value === 'section-ferrari') {
      return 0;
    }
    if (activeKey.value === 'section-favourites') {
      return 1;
    }
    if (activeKey.value === 'section-specials') {
      return 2;
    }
    if (activeKey.value === 'section-bundles') {
      return 3;
    }
    if (activeKey.value === 'section-kids') {
      return 4;
    }
    if (activeKey.value === 'section-accompaniments') {
      return 5;
    }
    if (activeKey.value === 'section-desserts') {
      return 6;
    }
    return 0;
  });

  useConsoleLog(activeIndexX, 'activeIndexX');

  const underlineStyle = computed(() => {
    const activeButton = buttonRefs.value[activeIndexX.value];
    if (!activeButton) return {};
    const width = `${activeButton.offsetWidth}px`;
    const left = `${activeButton.offsetLeft - 30}px`;
    return {
      width,
      transform: `translateX(${left})`,
    };
  });

  const setButtonRef = (el: HTMLElement | null) => {
    if (el) {
      buttonRefs.value.push(el as HTMLElement);
    }
    return el;
  };

  const goToSection = (title: string) => {
    const element = document.getElementById('section-' + title);
    if (element) {
      const headerOffset = 80;
      const elementPosition = element.getBoundingClientRect().top;
      const offsetPosition = elementPosition + window.scrollY - headerOffset;
      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth',
      });
    }
  };

  const { shouldShowLeftArrow, shouldShowRightArrow, scroll } = useNavigationArrows(containerRef);
</script>

<style scoped>
  .filter-nav-right {
    background: linear-gradient(-90deg, #faefdc, #faefdcff, rgba(255, 251, 246, 0.1));
  }
  .filter-nav-left {
    background: linear-gradient(90deg, #faefdc, #faefdcff, rgba(255, 251, 246, 0.1));
  }
  .underline {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #a25656;
    transition: transform 0.3s ease, width 0.3s ease;
  }
</style>