{"version":3,"file":"DEWP3Mqf.js","sources":["../../../../components/Header/HeaderDeliveryTime.vue","../../../../components/Header/HeaderPhones.vue","../../../../components/Header/HeaderWidgetAuth.vue","../../../../components/Header/HeaderWidgetBasket.vue","../../../../components/Header/HeaderBottomCategories.vue","../../../../components/Header/HeaderBottomLinks.vue","../../../../components/Header/TheHeader.vue"],"sourcesContent":["<template>\n  <div class=\"header-delivery-time\">\n    <div class=\"header-delivery-time__text\">Доставка ~60 минут</div>\n\n    <nuxt-link\n      class=\"header-delivery-time__link\"\n      to=\"/delivery/\"\n      :prefetch=\"false\"\n    >\n      Рассчитать для меня\n    </nuxt-link>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.header-delivery-time {\n  color: var(--ui-text-primary);\n\n  &__text {\n    margin-bottom: 3px;\n    font-size: 12px;\n    font-weight: 800;\n\n    @include media('>=desktop') {\n      font-size: 14px;\n    }\n  }\n\n  &__link {\n    display: block;\n    font-size: 10px;\n    font-weight: 600;\n    line-height: 15px;\n    color: inherit;\n\n    @include media('>=desktop') {\n      font-size: 13px;\n    }\n  }\n}\n</style>\n","<script lang=\"ts\" setup>\ntype Props = {\n  phones: string[]\n}\n\nconst props = defineProps<Props>()\n\nconst formattedPhones = props.phones.map((phone) => {\n  return {\n    number: phone,\n    href: phone.replaceAll(' ', ''),\n  }\n})\n</script>\n\n<template>\n  <div class=\"header-phones\">\n    <a\n      v-for=\"(phone, index) in formattedPhones\"\n      :key=\"index\"\n      class=\"header-phones__link\"\n      :href=\"`tel:${phone.href}`\"\n    >\n      {{ phone.number }}\n    </a>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.header-phones {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  &__link {\n    display: block;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n    color: var(--ui-text-primary);\n\n    @include media('>=desktop') {\n      font-size: 14px;\n      line-height: 18px;\n    }\n  }\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { useUserStore } from '@/store/user/user'\n\nconst { isAuthenticated } = storeToRefs(useUserStore())\n\nconst isLoading = ref(true)\n\nconst title = computed(() => {\n  return isAuthenticated.value ? 'Профиль' : 'Вход'\n})\n\nconst showLoadingState = computed(() => {\n  return isLoading.value && !isAuthenticated.value\n})\n\nconst onProfileClick = () => {\n  isAuthenticated.value ? navigateTo('/profile/orders/') : navigateTo('/login/')\n}\n\nonMounted(() => (isLoading.value = false))\n</script>\n\n<template>\n  <the-button\n    v-if=\"showLoadingState\"\n    variant=\"tertiary\"\n    size=\"sm\"\n    radius=\"lg\"\n    width=\"140\"\n    :loading=\"true\"\n  />\n\n  <the-button\n    v-if=\"!showLoadingState\"\n    data-test-id=\"headerAuthButton\"\n    variant=\"tertiary\"\n    size=\"sm\"\n    radius=\"lg\"\n    width=\"140\"\n    @click=\"onProfileClick\"\n  >\n    <the-icon name=\"user--filled\" size=\"24\" />\n    {{ title }}\n  </the-button>\n</template>\n","<script lang=\"ts\" setup>\nimport { useBasketStore } from '@/store/basket/basket'\nimport { useCityStore } from '@/store/city/city'\n\nimport { wordDeclension } from '@/api/modules/basket/lib'\n\nconst basketStore = useBasketStore()\nconst { currencySymbol } = useCityStore()\n\nconst itemsCount = computed(() => {\n  return wordDeclension(\n    ['товар', 'товара', 'товаров'],\n    basketStore.data?.itemsCount,\n  )\n})\n\nconst icon = computed(() => {\n  return basketStore.basketIsEmpty && basketStore.isLoaded\n    ? 'shopping-card-sad--filled'\n    : 'shopping-card-fun--filled'\n})\n\nconst goToBasket = () => navigateTo('/basket/')\n</script>\n\n<template>\n  <div class=\"header-basket-widget\">\n    <the-button\n      v-if=\"!basketStore.basketIsDisabled\"\n      size=\"sm\"\n      radius=\"lg\"\n      :icon=\"icon\"\n      width=\"140\"\n      indent-left\n      block\n      @click=\"goToBasket\"\n    >\n      <transition name=\"ui-fade\" mode=\"out-in\">\n        <span v-if=\"basketStore.basketIsEmpty\">Корзина</span>\n\n        <span v-else class=\"header-basket-widget__content\">\n          <span class=\"header-basket-widget__count\">\n            {{ itemsCount }}\n          </span>\n\n          <span class=\"header-basket-widget__price\">\n            {{ basketStore.data.totalPrice }} {{ currencySymbol }}\n          </span>\n        </span>\n      </transition>\n    </the-button>\n\n    <the-tooltip v-else position-x=\"left\" position-y=\"bottom\" fixed>\n      <template #activator>\n        <the-button\n          size=\"sm\"\n          radius=\"lg\"\n          icon=\"shopping-card-sad--filled\"\n          width=\"140\"\n          block\n          disabled\n          indent-left\n        >\n          Корзина\n        </the-button>\n      </template>\n      <span class=\"header-basket-widget__tooltip\">Ресторан не работает</span>\n    </the-tooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.header-basket-widget {\n  &__content {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    text-align: left;\n  }\n\n  &__count {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n  }\n\n  &__tooltip {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { AsyncDataKey } from '@/types/main'\n\nconst { data: simpleCategories } = useNuxtData(AsyncDataKey.SIMLE_CATEGORIES)\n</script>\n\n<template>\n  <div class=\"menu-categories\">\n    <the-slider\n      overlay=\"sm\"\n      :space-between=\"32\"\n      :slide-width=\"80\"\n      :ripple=\"false\"\n      is-different-width\n    >\n      <nuxt-link\n        v-for=\"(category, index) in simpleCategories\"\n        :key=\"index\"\n        :prefetch=\"false\"\n        active-class=\"menu-categories__link--active\"\n        :to=\"category.path\"\n        class=\"menu-categories__link\"\n      >\n        {{ category.name }}\n      </nuxt-link>\n    </the-slider>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.menu-categories {\n  height: 100%;\n  padding: 4px 24px;\n\n  @include media('>=desktop') {\n    max-width: 1200px;\n    padding: 4px 0;\n    margin: 0 auto;\n  }\n\n  &__link {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 24px;\n    color: var(--ui-text-primary);\n\n    &--active {\n      color: var(--ui-primary);\n    }\n  }\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { useCityStore } from '@/store/city/city'\nimport type { FooterLink } from '@/store/city/city.types'\n\nconst { findLinkByName } = useCityStore()\n\nconst jobsLink: FooterLink | undefined = findLinkByName('Вакансии') || undefined\n\nconst routerLinks = [\n  {\n    name: 'Акции',\n    path: '/sales/',\n    icon: 'flash--filled',\n    isHighlight: true,\n  },\n  {\n    name: 'Наши рестораны',\n    path: '/delivery/',\n  },\n  {\n    name: 'Бонусы',\n    path: '/bonus/',\n  },\n  {\n    name: 'Оплата',\n    path: '/payment/',\n  },\n]\n</script>\n\n<template>\n  <div class=\"header-bottom-links\">\n    <nuxt-link\n      v-for=\"link in routerLinks\"\n      :key=\"link.path\"\n      :prefetch=\"false\"\n      :to=\"link.path\"\n      class=\"header-bottom-links__link\"\n      :class=\"{ 'header-bottom-links__link--highlight': link.isHighlight }\"\n    >\n      <the-icon v-if=\"link.icon\" :name=\"link.icon\" color=\"var(--ui-primary)\" />\n      {{ link.name }}\n    </nuxt-link>\n\n    <a\n      href=\"https://farfor.ru/control/\"\n      rel=\"nofollow\"\n      class=\"header-bottom-links__link\"\n    >\n      Тайный покупатель\n    </a>\n\n    <a\n      v-if=\"jobsLink\"\n      :href=\"jobsLink.link\"\n      class=\"header-bottom-links__link\"\n      rel=\"nofollow\"\n    >\n      Работа в Farfor\n    </a>\n    <a\n      href=\"https://farfor.ru/partner/\"\n      class=\"header-bottom-links__link\"\n      rel=\"nofollow\"\n    >\n      Франшиза\n    </a>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.header-bottom-links {\n  display: flex;\n  gap: 32px;\n  align-items: center;\n  height: 100%;\n  padding: 4px 24px;\n\n  @include media('>=desktop') {\n    max-width: 1200px;\n    padding: 4px 0;\n    margin: 0 auto;\n  }\n\n  &__link {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 24px;\n    color: var(--ui-text-primary);\n\n    &--highlight {\n      color: var(--ui-primary);\n    }\n  }\n}\n</style>\n","<script lang=\"ts\" setup>\n/* Stores */\nimport { useCityStore } from '@/store/city/city'\n\n/* Types */\nimport { AsyncDataKey } from '@/types/main'\n\nconst { data: simpleCategories } = useNuxtData(AsyncDataKey.SIMLE_CATEGORIES)\n\nconst { cityInfo, phones } = useCityStore()\n\n// Наблюдатель за скроллом для добавления класса к header\nconst isScroll = ref(false)\nconst scrollObserverTarget = ref<HTMLElement | null>(null)\n\n// Наблюдатель за позицией блока с категориями, для показа навигации категорий\nconst isVisibleCategoryMenu = ref(false)\n\nconst observeCategoryMenu = () => {\n  const mainCategoriesElement = document.querySelector('#desktop-category')\n\n  // Если нет DOM элемента категорий или нет данных из API, выходим\n  if (!mainCategoriesElement || !simpleCategories.value.length) return\n\n  useIntersectionObserver(\n    mainCategoriesElement,\n    {\n      threshold: [0, 1],\n      rootMargin: '-150px 0px 0px',\n    },\n    ([entry]) => {\n      isVisibleCategoryMenu.value =\n        !entry.isIntersecting && entry.boundingClientRect.top !== 0\n    },\n  )\n}\n\nconst observeScroll = () => {\n  if (!scrollObserverTarget.value) return\n\n  useIntersectionObserver(\n    scrollObserverTarget.value,\n    { threshold: [0, 0.5, 1] },\n    ([{ isIntersecting }]) => {\n      isScroll.value = !isIntersecting\n    },\n  )\n}\n\nwatch(\n  () => simpleCategories.value,\n  () => observeCategoryMenu(),\n)\n\nonMounted(() => {\n  // Не работает через nextTick, поэтому сделал задержку\n  setTimeout(() => {\n    observeScroll()\n    observeCategoryMenu()\n  }, 300)\n})\n</script>\n\n<template>\n  <div ref=\"scrollObserverTarget\" class=\"header-observable-target\" />\n\n  <header class=\"header\" :class=\"{ 'header--scroll': isScroll }\">\n    <div class=\"header__container\">\n      <header-info\n        :is-active=\"cityInfo.is_active\"\n        :city-name=\"cityInfo.visible_name\"\n        :phones=\"phones\"\n      />\n\n      <header-widgets :is-active=\"cityInfo.is_active\" />\n    </div>\n\n    <header-bottom-menu :is-visible-categories=\"isVisibleCategoryMenu\" />\n  </header>\n</template>\n\n<style lang=\"scss\" scoped>\n.header-observable-target {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  height: 50px;\n  pointer-events: none;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.header {\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 9;\n  max-height: 136px;\n  background: var(--ui-white);\n  transition: filter 0.3s ease-in;\n\n  &--scroll {\n    filter: drop-shadow(0 6px 30px rgba(50, 52, 72, 0.1));\n  }\n\n  &__container {\n    display: flex;\n    justify-content: space-between;\n    padding: 26px 24px;\n\n    @include media('height<=desktop-mini-height', '>=desktop-mini') {\n      padding: 15px 24px;\n    }\n\n    @include media('>=desktop') {\n      max-width: 1200px;\n      padding: 26px 0;\n      margin: 0 auto;\n    }\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_cache","_createElementVNode","_createVNode","_component_nuxt_link","_withCtx","formattedPhones","__props","phone","isAuthenticated","storeToRefs","useUserStore","isLoading","ref","title","computed","showLoadingState","onProfileClick","navigateTo","onMounted","basketStore","useBasketStore","currencySymbol","useCityStore","itemsCount","wordDeclension","_a","icon","goToBasket","simpleCategories","useNuxtData","AsyncDataKey","findLinkByName","jobsLink","routerLinks","cityInfo","phones","isScroll","scrollObserverTarget","isVisibleCategoryMenu","observeCategoryMenu","mainCategoriesElement","useIntersectionObserver","entry","observeScroll","isIntersecting","watch"],"mappings":";;u0BAEI,OAAAA,EAAA,EAAAC,EAAA,MAAKC,EAAA,CAELC,EAMY,CAAA,IAAAA,EAAA,CAAA,EAAAC,EAAA,MAAA,CAAA,MAAA,4BAAA,EAAA,qBAAA,EAAA,GALVC,EAAkCC,EAAA,CAClC,MAAe,6BACd,GAAA,wBAPP,EAAA,CAAA,QAAAC,EAAA,IAUIJ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,6BAVJ,qKCOA,MAAMK,EAFQC,EAEgB,OAAO,IAAKC,IACjC,CACL,OAAQA,EACR,KAAMA,EAAM,WAAW,IAAK,EAAE,CAChC,EACD,+uBCTD,KAAM,CAAE,gBAAAC,CAAA,EAAoBC,EAAYC,GAAc,EAEhDC,EAAYC,EAAI,EAAI,EAEpBC,EAAQC,EAAS,IACdN,EAAgB,MAAQ,UAAY,MAC5C,EAEKO,EAAmBD,EAAS,IACzBH,EAAU,OAAS,CAACH,EAAgB,KAC5C,EAEKQ,EAAiB,IAAM,CAC3BR,EAAgB,MAAQS,EAAW,kBAAkB,EAAIA,EAAW,SAAS,CAC/E,EAEU,OAAAC,EAAA,IAAOP,EAAU,MAAQ,EAAM,ikBCbzC,MAAMQ,EAAcC,EAAe,EAC7B,CAAE,eAAAC,CAAe,EAAIC,EAAa,EAElCC,EAAaT,EAAS,IAAM,OACzB,OAAAU,EACL,CAAC,QAAS,SAAU,SAAS,GAC7BC,EAAAN,EAAY,OAAZ,YAAAM,EAAkB,UACpB,CAAA,CACD,EAEKC,EAAOZ,EAAS,IACbK,EAAY,eAAiBA,EAAY,SAC5C,4BACA,2BACL,EAEKQ,EAAa,IAAMV,EAAW,UAAU,unCCnB9C,KAAM,CAAE,KAAMW,CAAA,EAAqBC,EAAYC,EAAa,gBAAgB,2fCCtE,KAAA,CAAE,eAAAC,CAAe,EAAIT,EAAa,EAElCU,EAAmCD,EAAe,UAAU,GAAK,OAEjEE,EAAc,CAClB,CACE,KAAM,QACN,KAAM,UACN,KAAM,gBACN,YAAa,EACf,EACA,CACE,KAAM,iBACN,KAAM,YACR,EACA,CACE,KAAM,SACN,KAAM,SACR,EACA,CACE,KAAM,SACN,KAAM,WAAA,CAEV,mnCCpBA,KAAM,CAAE,KAAML,CAAA,EAAqBC,EAAYC,EAAa,gBAAgB,EAEtE,CAAE,SAAAI,EAAU,OAAAC,CAAO,EAAIb,EAAa,EAGpCc,EAAWxB,EAAI,EAAK,EACpByB,EAAuBzB,EAAwB,IAAI,EAGnD0B,EAAwB1B,EAAI,EAAK,EAEjC2B,EAAsB,IAAM,CAC1B,MAAAC,EAAwB,SAAS,cAAc,mBAAmB,EAGpE,CAACA,GAAyB,CAACZ,EAAiB,MAAM,QAEtDa,EACED,EACA,CACE,UAAW,CAAC,EAAG,CAAC,EAChB,WAAY,gBACd,EACA,CAAC,CAACE,CAAK,IAAM,CACXJ,EAAsB,MACpB,CAACI,EAAM,gBAAkBA,EAAM,mBAAmB,MAAQ,CAAA,CAEhE,CACF,EAEMC,EAAgB,IAAM,CACrBN,EAAqB,OAE1BI,EACEJ,EAAqB,MACrB,CAAE,UAAW,CAAC,EAAG,GAAK,CAAC,CAAE,EACzB,CAAC,CAAC,CAAE,eAAAO,CAAA,CAAgB,IAAM,CACxBR,EAAS,MAAQ,CAACQ,CAAA,CAEtB,CACF,EAEA,OAAAC,EACE,IAAMjB,EAAiB,MACvB,IAAMW,EAAoB,CAC5B,EAEArB,EAAU,IAAM,CAEd,WAAW,IAAM,CACDyB,EAAA,EACMJ,EAAA,GACnB,GAAG,CAAA,CACP","debug_id":"13e582c4-fdec-5ac0-94d5-8e95039edfeb"}