{"version":3,"file":"8GGBWwvU.js","sources":["../../../../components/Header/TheHeaderMobile.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue'\n\nimport SupportDialog from '~/components/Header/HeaderNavigationDrawer/SupportDialog.vue'\nimport ChatIcon from '~/components/Icons/ChatIcon.vue'\nimport UserAccountIcon from '@/components/Icons/UserAccount.vue'\n\nimport { useCityStore } from '~/store/city/city'\nimport { useUserStore } from '~/store/user/user'\n\nconst cityStore = useCityStore()\nconst userStore = useUserStore()\nconst { isTablet } = useDevice()\n\nconst props = defineProps({\n  navShow: {\n    type: Boolean,\n    required: true,\n  },\n})\nconst emit = defineEmits(['openNavigationDrawer'])\n\nconst isDialogCallSupportShow = ref(false)\nconst isCitySelectListShow = ref(false)\nconst isAuthenticated = computed(() => userStore.isAuthenticated)\n\nconst isActive = computed(() => cityStore.cityInfo.is_active)\nconst padeg = computed(() => cityStore.cityInfo.padeg)\n\nconst openNavigationDrawer = () => {\n  emit('openNavigationDrawer')\n}\n</script>\n\n<template>\n  <header class=\"header-mobile\">\n    <nuxt-link class=\"header-mobile__logo\" to=\"/\">\n      <nuxt-img\n        src=\"/logo-mobile.svg\"\n        alt=\"Логотип компании Фарфор\"\n        width=\"30\"\n        height=\"30\"\n      />\n    </nuxt-link>\n\n    <div class=\"header-mobile__city\">\n      <header-city-select\n        :is-city-select-list-show=\"isCitySelectListShow\"\n        :city-name=\"padeg?.imen\"\n        class=\"information__city-select\"\n      />\n      <header-working-hours\n        class=\"information__city-hours\"\n        @show-city-select-list=\"isCitySelectListShow = !isCitySelectListShow\"\n      />\n    </div>\n\n    <div class=\"header-mobile__actions\">\n      <app-button\n        v-if=\"isActive\"\n        :ripple=\"true\"\n        variant=\"text\"\n        icon\n        width=\"36px\"\n        height=\"40px\"\n        @click=\"isDialogCallSupportShow = !isDialogCallSupportShow\"\n      >\n        <chat-icon />\n      </app-button>\n\n      <app-button\n        v-if=\"isTablet\"\n        :ripple=\"true\"\n        variant=\"text\"\n        icon\n        width=\"36px\"\n        height=\"40px\"\n        size=\"20\"\n        :to=\"isAuthenticated ? '/profile/orders/' : '/login/'\"\n      >\n        <user-account-icon />\n      </app-button>\n\n      <app-button :ripple=\"true\" variant=\"text\" icon width=\"36px\" height=\"40px\">\n        <svg\n          width=\"30\"\n          height=\"30\"\n          viewBox=\"0 0 100 100\"\n          :class=\"{ opened: props.navShow }\"\n          :aria-expanded=\"!props.navShow\"\n          @click=\"openNavigationDrawer\"\n        >\n          <path\n            class=\"line line1\"\n            d=\"M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058\"\n          />\n          <path class=\"line line2\" d=\"M 20,50 H 80\" />\n          <path\n            class=\"line line3\"\n            d=\"M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942\"\n          />\n        </svg>\n      </app-button>\n    </div>\n\n    <app-dialog v-model=\"isDialogCallSupportShow\">\n      <template #title>\n        <h2 class=\"dialog__title\">Связаться с поддержкой</h2>\n      </template>\n      <template #body>\n        <support-dialog />\n      </template>\n    </app-dialog>\n  </header>\n</template>\n\n<style scoped lang=\"scss\">\n.header-mobile {\n  position: sticky;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1005;\n  display: grid;\n  grid-template-columns: max-content 1fr max-content;\n  gap: 0 20px;\n  align-items: center;\n  width: 100%;\n  padding: 10px 20px;\n  background: $white;\n  border-bottom: 1px solid #f1f4f9;\n\n  &__logo {\n    width: 28px;\n    height: 28px;\n  }\n\n  &__city {\n    @include media('>=tablet', '<=desktop-mini') {\n      display: grid;\n      grid-template-columns: max-content max-content;\n      gap: 0 35px;\n      align-items: center;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    gap: 0 5px;\n\n    :deep(.v-btn__overlay) {\n      display: none;\n    }\n\n    :deep(.v-btn) {\n      color: #9e9e9e !important;\n    }\n  }\n}\n\n.dialog__title {\n  position: absolute;\n  padding-left: 35px;\n  font-size: 16px;\n  font-weight: 800;\n  color: $text-black;\n  text-align: center;\n  @include media('>=tablet', '<=desktop-mini') {\n    padding-left: 30%;\n  }\n}\n\n// burger transition\n\n.burger__svg {\n  width: 30px;\n  height: 30px;\n}\n\n.line {\n  fill: none;\n  stroke: black;\n  stroke-linecap: round;\n  stroke-width: 6;\n  transition: stroke-dasharray 200ms cubic-bezier(0.4, 0, 0.2, 1),\n    stroke-dashoffset 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.line1 {\n  stroke-dasharray: 60 207;\n  stroke-width: 6;\n}\n.line2 {\n  stroke-dasharray: 60 60;\n  stroke-width: 6;\n}\n.line3 {\n  stroke-dasharray: 60 207;\n  stroke-width: 6;\n}\n.opened .line1 {\n  stroke-dasharray: 90 207;\n  stroke-dashoffset: -134;\n  stroke-width: 6;\n}\n.opened .line2 {\n  stroke-dasharray: 1 60;\n  stroke-dashoffset: -30;\n  stroke-width: 6;\n}\n.opened .line3 {\n  stroke-dasharray: 90 207;\n  stroke-dashoffset: -134;\n  stroke-width: 6;\n}\n</style>\n"],"names":["cityStore","useCityStore","userStore","useUserStore","isTablet","useDevice","props","__props","emit","__emit","isDialogCallSupportShow","ref","isCitySelectListShow","isAuthenticated","computed","isActive","padeg","openNavigationDrawer"],"mappings":";;q6EAUA,MAAMA,EAAYC,IACZC,EAAYC,IACZ,CAAE,SAAAC,GAAaC,IAEfC,EAAQC,EAMRC,EAAOC,EAEPC,EAA0BC,EAAI,EAAK,EACnCC,EAAuBD,EAAI,EAAK,EAChCE,EAAkBC,EAAS,IAAMZ,EAAU,eAAe,EAE1Da,EAAWD,EAAS,IAAMd,EAAU,SAAS,SAAS,EACtDgB,EAAQF,EAAS,IAAMd,EAAU,SAAS,KAAK,EAE/CiB,EAAuB,IAAM,CACjCT,EAAK,sBAAsB,CAAA","debug_id":"28a74243-b868-51b0-9478-7c8e625c0ef9"}