{"version":3,"file":"AppHeader.e625b0c7.js","sources":["../../../../lib/constants.ts","../../../../composables/breakpoints.ts","../../../../components/global/layout/AppHeader.vue"],"sourcesContent":["export const BREAKPOINTS = {\n  tiny: 480,\n  tablet: 768,\n  desktop: 1024,\n  widescreen: 1200,\n  fullhd: 1680,\n};\n","import { useBreakpoints } from '@vueuse/core';\nimport { BREAKPOINTS } from '@/lib/constants';\n\nexport function useResponsiveBreakpoints() {\n  const breakpoints = useBreakpoints(BREAKPOINTS);\n  const isMobile = breakpoints.smaller('tablet');\n  const isDesktop = breakpoints.greater('desktop');\n\n  return { isMobile, isDesktop };\n}\n","<template>\n  <header class=\"app-header\" :class=\"{ 'is-nav-open': isNavOpen, 'is-register': isRegistrationFunnel }\">\n    <div class=\"app-header__inner container\">\n      <main-logo class=\"app-header__logo\" />\n      <template v-if=\"!isRegistrationFunnel\">\n        <app-nav ref=\"nav\" class=\"app-header__nav\" @close-modal=\"closeNav\" />\n        <button type=\"button\" class=\"app-header__toggle\" @click=\"toggleNav\" aria-label=\"Toggle Navigation\">\n          <svg class=\"app-header__toggle-icon\" viewBox=\"0 0 29 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g class=\"app-header__toggle-lines\">\n              <path d=\"M3.00098 15H27.001\" stroke=\"#FFFFFF\" stroke-width=\"4\" stroke-linecap=\"round\" />\n              <path d=\"M3.00098 27H27.001\" stroke=\"#FFFFFF\" stroke-width=\"4\" stroke-linecap=\"round\" />\n              <path d=\"M3.00098 3H27.001\" stroke=\"#FFFFFF\" stroke-width=\"4\" stroke-linecap=\"round\" />\n            </g>\n            <g class=\"app-header__toggle-close\">\n              <line x1=\"2.82842\" y1=\"3.07009\" x2=\"26.9961\" y2=\"27.1716\" stroke=\"#DFC8E5\" stroke-width=\"4\"\n                stroke-linecap=\"round\" />\n              <line x1=\"26.9814\" y1=\"2.88385\" x2=\"2.84683\" y2=\"27.0185\" stroke=\"#DFC8E5\" stroke-width=\"4\"\n                stroke-linecap=\"round\" />\n            </g>\n          </svg>\n        </button>\n      </template>\n    </div>\n  </header>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, watch } from \"vue\";\nimport AppNav from \"@/components/global/layout/AppNav.vue\";\nimport MainLogo from \"@/components/global/elements/MainLogo.vue\";\nimport { useResponsiveBreakpoints } from \"@/composables/breakpoints\";\nimport { useRoute } from \"vue-router\";\nimport { scrollLock, scrollUnlock } from \"~/utils/scroll\";\n\nconst nav = ref<typeof AppNav | null>(null);\n\nconst { isRegistrationFunnel } = useRegistration();\n\nconst isNavOpen = ref(false);\nconst { isDesktop } = useResponsiveBreakpoints();\nconst route = useRoute();\n\nconst toggleNav = () => {\n  isNavOpen.value = !isNavOpen.value;\n};\n\nconst closeNav = () => {\n  isNavOpen.value = false;\n};\n\nwatch(isDesktop, (value) => {\n  if (value) {\n    closeNav();\n  }\n});\n\nwatch(route, () => closeNav());\n\nwatch(isNavOpen, (value) => {\n  if (!nav.value) {\n    return;\n  }\n  if (value) {\n    scrollLock(nav.value.$el);\n  } else {\n    scrollUnlock(nav.value.$el);\n  }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.app-header {\n  color: var(--primary);\n  background: linear-gradient(45deg, #22c0ed, #fe007c);\n  position: relative;\n  z-index: map-get($z-index, header);\n\n  @include touch {\n    &.is-nav-open {\n      background-color: var(--primary);\n      z-index: map-get($z-index, popup);\n    }\n  }\n\n  &__inner {\n    height: var(--header-height);\n    display: grid;\n    grid-template-columns: 1fr max-content;\n    align-items: center;\n  }\n\n  &__logo {\n    @include touch {\n      .is-nav-open & {\n        opacity: 0;\n      }\n    }\n  }\n\n  &__toggle {\n    width: rem(20);\n    height: rem(20);\n\n    @include desktop {\n      display: none;\n    }\n\n    &-lines {\n      .is-nav-open & {\n        opacity: 0;\n      }\n    }\n\n    &-close {\n      opacity: 0;\n\n      .is-nav-open & {\n        opacity: 1;\n      }\n    }\n  }\n}\n</style>\n"],"names":["BREAKPOINTS","useResponsiveBreakpoints","breakpoints","useBreakpoints","isMobile","isDesktop","nav","ref","isRegistrationFunnel","useRegistration","isNavOpen","route","useRoute","toggleNav","closeNav","watch","value","scrollLock","scrollUnlock"],"mappings":"4xBAAO,MAAMA,EAAc,CACzB,KAAM,IACN,OAAQ,IACR,QAAS,KACT,WAAY,KACZ,OAAQ,IACV,ECHO,SAASC,GAA2B,CACnC,MAAAC,EAAcC,EAAeH,CAAW,EACxCI,EAAWF,EAAY,QAAQ,QAAQ,EACvCG,EAAYH,EAAY,QAAQ,SAAS,EAExC,MAAA,CAAE,SAAAE,EAAU,UAAAC,EACrB,w6BCyBM,MAAAC,EAAMC,EAA0B,IAAI,EAEpC,CAAE,qBAAAC,GAAyBC,IAE3BC,EAAYH,EAAI,EAAK,EACrB,CAAE,UAAAF,GAAcJ,IAChBU,EAAQC,IAERC,EAAY,IAAM,CACZH,EAAA,MAAQ,CAACA,EAAU,KAAA,EAGzBI,EAAW,IAAM,CACrBJ,EAAU,MAAQ,EAAA,EAGd,OAAAK,EAAAV,EAAYW,GAAU,CACtBA,GACOF,GACX,CACD,EAEKC,EAAAJ,EAAO,IAAMG,EAAA,CAAU,EAEvBC,EAAAL,EAAYM,GAAU,CACrBV,EAAI,QAGLU,EACSC,EAAAX,EAAI,MAAM,GAAG,EAEXY,EAAAZ,EAAI,MAAM,GAAG,EAC5B,CACD"}