MenuAnchorLinks.vue

MenuAnchorLinks.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="el => setButtonRef(el, index)"
      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,
        [activeIndexX === 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 useAnchorLinksAnimation from '@/composables/useAnchorLinksAnimation';
  interface Props {
    sections: Array<keyof typeof sectionTitles>;
    menuType?: MenuType;
  }
  const props = defineProps<Props>();
  const { currentActiveSection } = useAnchorLinksAnimation();
  const containerRef = ref<HTMLElement | null>();
  const scrollOffset = ref(0);

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

  const buttonRefs = ref<(Element | globalThis.ComponentPublicInstance | null)[]>([]);

  const buttonXPositions = computed(() => {
    const elements = buttonRefs.value.map(section => section);
    return elements
      .filter(el => el)
      .map(element => {
        const { width, x } = (element as Element)!.getBoundingClientRect();
        return { width, x };
      });
  });

  const setButtonRef = (el: Element | globalThis.ComponentPublicInstance | null, index: number) => {
    if (el) {
      buttonRefs.value[index] = el as HTMLElement;
    }
    return el;
  };

  const activeIndexX = computed(() => {
    return props.sections.indexOf(currentActiveSection.value as keyof typeof sectionTitles) ?? -1;
  });

  watch(activeIndexX, () => {
    const targetElement = buttonRefs.value[activeIndexX.value];

    const container = containerRef.value;
    const scrollLeft = container.scrollLeft;
    const containerWidth = container.offsetWidth;

    const elementLeft = targetElement.offsetLeft;
    const elementRight = elementLeft + targetElement.offsetWidth;

    if (elementLeft < scrollLeft || elementRight > scrollLeft + containerWidth) {
      // Element is out of view, scroll to it
      container.scrollTo({
        left: elementLeft,
        behavior: 'smooth',
      });
    }
  });

  // Watch for scroll events on the container and update the scrollOffset
  watchEffect(onInvalidate => {
    const container = containerRef.value;
    if (container) {
      const onScroll = () => {
        scrollOffset.value = container.scrollLeft;
      };

      container.addEventListener('scroll', onScroll);

      // Cleanup on component unmount or when the container changes
      onInvalidate(() => {
        container.removeEventListener('scroll', onScroll);
      });
    }
  });

  const underlineStyle = computed(() => {
    const activeButton = buttonXPositions.value[activeIndexX.value];
    if (!activeButton) return {};

    const paddingLeft = buttonXPositions.value[0]?.x ?? 0;
    const width = `${0.5 * activeButton.width}px`;
    // Use the reactive scrollOffset here to ensure reactivity
    const left = `${
      activeButton.x - paddingLeft + 0.25 * activeButton.width - scrollOffset.value
    }px`;

    return {
      width,
      transform: `translateX(${left})`,
      '-webkit-transform': `translateX(${left})`,
    };
  });

  const goToSection = (title: string) => {
    const element = document.getElementById('section-' + title);
    if (element) {
      const headerOffset = 40;
      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>
@/composables/useAnchorLinksAnimation