{"version":3,"file":"SecondaryNav-BbOeHGT7.js","sources":["../../src/components/navigation/SecondaryNav.vue"],"sourcesContent":["<template>\n  <div :style=\"{ height: navHeight + 'px' }\">\n    <div id=\"secondary-nav\" ref=\"frame\" :class=\"$style.frame\" :style=\"{ top: offset + 'px' }\">\n      <div :class=\"$style.nav\">\n        <nav\n          ref=\"nav\"\n          :class=\"$style.secondary\"\n          aria-label=\"Secondary Navigation\"\n          role=\"navigation\"\n        >\n          <ul ref=\"list\">\n            <li v-for=\"(item, index) in items\" :key=\"index\">\n              <a\n                :id=\"`anchor-link-${index}`\"\n                :class=\"[{ [$style.active]: activeItem === item.url }]\"\n                :href=\"item.url\"\n                :ga4-event=\"\n                  JSON.stringify({\n                    click_type: 'navigation',\n                    component: 'SecondaryNav',\n                    content_group: `${parent}`,\n                    gtm_tag: 'navigation',\n                    link_text: `${item.label}`,\n                    link_url: `${item.url}`,\n                  })\n                \"\n                v-html=\"item.label\"\n              ></a>\n            </li>\n          </ul>\n        </nav>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\nimport { SecondaryNavItem } from '@/types/common.interface';\nimport { storeToRefs } from 'pinia';\nimport { useMainStore } from '@/stores/mainStore';\nimport { useRoute } from 'vue-router';\nimport { useRouteParent, useScreenSize } from '@/composables/Common.js';\n\nconst props = defineProps<{\n  items: Array<SecondaryNavItem>;\n}>();\n\nconst { isMobile } = useScreenSize();\nconst { parent } = useRouteParent();\nconst route = useRoute();\nconst store = useMainStore();\nconst style = useCssModule();\n\nconst { showBanner } = storeToRefs(store);\n\nconst activeNavItem = ref<null | string>(null);\nconst frame = ref();\nconst heights = ref({\n  'main-nav': 0,\n});\nconst list = ref();\nconst nav = ref();\nconst offset = ref();\nconst navHeight = ref();\nconst navPositions = ref([]);\nconst navTop = ref();\nconst pageSections = ref<HTMLElement>([]);\n\nonBeforeUnmount(() => {\n  frame.value.classList.remove(`${style.fixed}`);\n});\n\nonMounted(() => {\n  checkNav();\n  checkActiveItem();\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      checkHeights();\n    });\n  });\n\n  window.addEventListener('scroll', () => {\n    checkActiveItem();\n    checkPos();\n  });\n\n  if (route.hash) {\n    activeNavItem.value = route.hash;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        checkPos();\n        const main = document.getElementById('main-nav');\n        window.scrollBy(0, -parseInt(main.getBoundingClientRect().height + navHeight.value));\n      });\n    });\n  }\n});\n\nwatch(heights.value, () => {\n  setOffset();\n});\n\nwatch(isMobile, () => {\n  setOffset();\n});\n\nwatch(showBanner, () => {\n  checkHeights();\n  setOffset();\n});\n\nfunction checkActiveItem() {\n  pageSections.value.forEach((section, key) => {\n    if (section) {\n      const pos = window.scrollY + navHeight.value;\n      const top = section.offsetTop;\n      const height = section.clientHeight;\n\n      if (pos > top && pos < top + height) {\n        activeNavItem.value = props.items[key].url;\n\n        if (navPositions.value[key] === 0) {\n          nav.value.setAttribute('style', null);\n        }\n      }\n    }\n  });\n}\n\nfunction checkHeights() {\n  const banner = document.getElementById('guggen-banner');\n  const main = document.getElementById('main-nav');\n\n  if (banner) {\n    heights.value['banner'] = banner.getBoundingClientRect().height;\n  }\n\n  navHeight.value = nav.value.offsetHeight;\n  navTop.value =\n    window.scrollY !== 0\n      ? window.scrollY + nav.value.getBoundingClientRect().top\n      : nav.value.getBoundingClientRect().top;\n\n  const resizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      const type = entry.target.id;\n\n      heights.value[type] = entry.contentBoxSize[0].blockSize;\n    }\n  });\n\n  resizeObserver.observe(main);\n}\n\nfunction checkNav() {\n  props.items.forEach((item, key) => {\n    // Determine sections to watch for changing active item indicator.\n    const el = document.getElementById(item.url.replace('#', ''));\n    pageSections.value.push(el);\n\n    const navItem = document.getElementById('anchor-link-' + key);\n    const navItemPos = navItem.getBoundingClientRect();\n\n    const offset =\n      navItemPos.left + 48 > window.innerWidth\n        ? window.innerWidth - 48 - (navItemPos.left + navItemPos.width)\n        : 0;\n\n    navPositions.value.push(offset);\n  });\n}\n\nfunction checkPos() {\n  const curPos = window.scrollY + heights.value['main-nav'];\n\n  if (frame.value && !frame.value.classList.contains(`${style.fixed}`) && curPos >= navTop.value) {\n    setOffset();\n    frame.value.classList.add(`${style.fixed}`);\n  }\n\n  if (frame.value && frame.value.classList.contains(`${style.fixed}`) && curPos <= navTop.value) {\n    frame.value.classList.remove(`${style.fixed}`);\n  }\n}\n\nfunction setOffset() {\n  offset.value = heights.value['main-nav'];\n}\n</script>\n\n<style lang=\"scss\" module>\n.frame {\n  background-color: $white;\n  border-bottom: 1px solid $black;\n  margin: 0 auto 0 -1rem;\n  padding: 0 1rem;\n  width: 100%;\n\n  &.fixed {\n    left: 0;\n    margin-left: auto;\n    padding-left: 1rem;\n    position: fixed;\n    z-index: get-zindex(menu) - 1;\n\n    ul {\n      &::after {\n        position: fixed;\n      }\n    }\n  }\n}\n\n.secondary {\n  display: block;\n  margin-right: px-to-rem(15);\n  overflow-x: scroll;\n  padding: 0;\n  /* Hide scrollbar for FireFox */\n  scrollbar-width: none;\n  width: 100%;\n\n  /* Hide scrollbar for Chrome and Safari */\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ul {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n    width: fit-content;\n\n    li {\n      display: block;\n      flex: 0 1 auto;\n      list-style-type: none;\n      margin-right: px-to-rem(40);\n\n      a {\n        @include subtitle-2;\n        @include space-0-above;\n\n        & {\n          border-bottom: 2px solid transparent;\n          cursor: pointer;\n          display: inline-block;\n          padding: 1rem 0;\n          text-decoration: none;\n        }\n\n        &.active,\n        &:hover {\n          border-color: $black;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n\n      &:last-of-type {\n        z-index: 2;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);\n      height: 3.35rem;\n      position: absolute;\n      right: 0;\n      width: 3rem;\n      z-index: 1;\n    }\n  }\n}\n\n@media (min-width: $break-point) {\n  .frame {\n    margin-left: auto;\n    padding-left: 0;\n\n    &::after {\n      @include line;\n    }\n\n    &.fixed {\n      padding: 0;\n      right: 0;\n\n      .nav {\n        padding: 0 2rem;\n      }\n\n      .secondary {\n        ul {\n          max-width: 80em;\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n\n  .nav {\n    max-width: 80em;\n    margin: 0 auto;\n    position: relative;\n  }\n\n  .secondary {\n    overflow-x: auto;\n\n    ul {\n      max-width: 100%;\n      width: auto;\n\n      &::after {\n        content: initial;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","isMobile","useScreenSize","parent","useRouteParent","route","useRoute","store","useMainStore","style","useCssModule","showBanner","storeToRefs","activeNavItem","ref","frame","heights","list","nav","offset","navHeight","navPositions","navTop","pageSections","onBeforeUnmount","onMounted","checkNav","checkActiveItem","checkHeights","checkPos","main","watch","setOffset","section","key","pos","top","height","banner","entries","entry","type","item","el","navItemPos","curPos"],"mappings":"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"}