{"version":3,"file":"mockupMenu-103c1fc7.js","sources":["../../src/components/Main/Languages.vue","../../src/components/Main/Menu/MenuMobile.vue","../../src/components/Main/Menu/MenuDesktop.vue","../../src/components/Main/Menu/Menu.vue","../../src/components/Main/Header/Header.vue","../../src/stories/mockup/mockupMenu.ts"],"sourcesContent":["<template>\n  <span class=\"languages text-overline\">\n    <ul>\n      <li v-for=\"language of locales.available\">\n        {{language}}\n      </li>\n    </ul>\n  </span>\n</template>\n\n<script setup lang=\"ts\">\nconst {locales} = useConfig()\n</script>\n\n<style scoped lang=\"scss\">\n.languages {\n  display: inline-block;\n  margin-right: 15px;\n  letter-spacing: 3px;\n\n  ul {\n    li {\n      display: inline-block;\n      padding: 0 4px;\n      cursor: pointer;\n      text-transform: uppercase;\n      transition: opacity 0.15s ease-in-out;\n      opacity: 0.25;\n\n      &:hover {\n        transition: opacity 0.15s ease-in-out;\n        opacity: 0.75;\n      }\n    }\n  }\n}\n</style>","<script setup lang=\"ts\">\nconst { modelValue, items } = defineProps<{\n  modelValue: Boolean,\n}>()\n\nconst active: Ref<boolean> = ref(modelValue)\n</script>\n\n<template>\n  <span class=\"menu\">\n    <v-icon\n        @click=\"active = true\"\n        size=\"27\" class=\"hidden-md-and-up\"\n    >las la-bars</v-icon>\n\n    <v-expand-x-transition>\n      <div v-if=\"active\" class=\"menu__inner\">\n        <v-icon\n            v-if=\"active\"\n            class=\"hidden-md-and-up\" size=\"32\"\n            @click=\"active = false\"\n        >las la-times</v-icon>\n\n        <slot />\n      </div>\n    </v-expand-x-transition>\n  </span>\n</template>\n\n<style scoped lang=\"scss\">\n.menu {\n  &__inner {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 5;\n    background: #111;\n    font-family: var(--font-primary);\n    opacity: 0.95;\n  }\n\n  :deep(.menu__items) {\n    display: grid;\n    align-content: center;\n    text-align: center;\n    height: 100%;\n    color: white;\n    z-index: 2;\n\n    ul {\n      li {\n        width: 100%;\n        margin: 0;\n\n        a {\n          display: block;\n          width: 100%;\n          line-height: 50px;\n          transition: all 0.2s ease-in-out;\n          transform: translateX(0);\n          opacity: 1;\n          font-size: 20px;\n\n          &:before {\n            content: initial;\n          }\n        }\n\n        &:hover a {\n          transform: translateX(5px);\n          opacity: 0.5;\n        }\n      }\n    }\n  }\n\n  :deep(.v-icon) {\n    cursor: pointer;\n    z-index: 3;\n\n    &.la-bars {\n      margin-top: -2px;\n    }\n\n    &.la-times {\n      position: absolute;\n      color: white;\n      top: 24px !important;\n      right: 21px !important;\n    }\n  }\n}\n</style>","<script setup lang=\"ts\">\n</script>\n\n<template>\n  <div class=\"menu\">\n    <slot />\n  </div>\n</template>\n\n<style lang=\"scss\">\n.menu {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  line-height: 32px;\n\n  @media(max-width: 599px) {\n    left: inherit;\n    top: 50%;\n    margin-top: -15px;\n  }\n\n  font-family: var(--font-primary);\n\n  :deep(.v-icon) {\n    position: absolute;\n    top: 28px;\n    right: 0;\n    cursor: pointer;\n  }\n}\n</style>","<script setup lang=\"ts\">\nconst { menu } = defineProps<{\n  menu: IMenu\n}>()\n\nconst modelValue = ref(!!menu.initialValue)\n</script>\n\n<template>\n  <MenuDesktop\n      class=\"hidden-xs\"\n      :menu=\"menu\"\n  >\n    <MenuItems :items=\"menu.items\" />\n  </MenuDesktop>\n  <MenuMobile\n    class=\"hidden-sm-and-up\"\n    :model-value=\"modelValue\"\n    :menu=\"menu\"\n  >\n    <MenuItems\n        :items=\"menu.items\"\n        @close=\"modelValue = false\"\n    />\n  </MenuMobile>\n</template>\n\n<style scoped lang=\"scss\">\n.menu {\n\n}\n</style>","<template>\n  <div :class=\"['header', {'header--dark': dark}]\">\n    <Logo class=\"mr-4\" />\n\n    <Menu :menu=\"menu\" />\n    <Languages v-if=\"multiLang\" />\n\n    <div v-if=\"!multiLang\" class=\"logo-text\" v-text=\"config.application.title\" />\n\n    <a\n        class=\"sample-button hidden-xs\"\n        v-if=\"menu.sampleButton\"\n    >\n      <v-icon size=\"30px\">lab la-instagram</v-icon>\n    </a>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst config = useConfig()\n\nconst { menu, multiLang } = defineProps<{\n  menu: IMenu,\n  multiPage?: boolean,\n  multiLang?: boolean,\n  dark?: boolean\n}>()\n</script>\n\n<style scoped lang=\"scss\">\n.header {\n  position: relative;\n  user-select: none;\n  text-align: left;\n\n  :deep(.logo) {\n    margin-right: 4px;\n  }\n\n  .logo-text {\n    vertical-align: top;\n    text-align: left;\n    font-family: var(--font-primary);\n    font-size: 24px;\n    display: none;\n\n    @media(max-width: 599px) {\n      display: inline-block;\n    }\n  }\n\n  & + :deep(.hero) {\n    margin-top: 120px;\n\n    @media(max-width: 900px) {\n      margin-top: 80px;\n    }\n\n    @media(max-width: 700px) {\n      margin-top: 40px;\n    }\n  }\n\n  &--dark {\n    :deep(.menu__items) ul li a:before {\n      background: white;\n    }\n  }\n\n  &-right {\n    position: absolute;\n    top: 26px;\n    right: 0;\n  }\n\n  :deep(.menu) {\n    text-align: center;\n\n    ul {\n      display: inline-block;\n    }\n  }\n\n  :deep(.languages) {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n\n    @media(max-width: 599px) {\n      padding-right: 16px;\n      border-right: 1px solid rgba(255, 255, 255, 0.04);\n      right: 30px;\n    }\n  }\n\n  .sample-button {\n    position: absolute;\n    right: 0;\n  }\n}\n</style>\n","export const mockupMenu = [\n    {\n        label: \"Home\",\n        href: '#',\n    },\n    {\n        label: \"Dove siamo\",\n        href: '#'\n    },\n    {\n        label: 'Prenota',\n        href: '#'\n    }\n]\n\nexport const mockupMenuWithFoodMenu = [\n    {\n        label: \"Home\",\n        href: '#',\n    },\n    {\n        label: \"Recensioni\",\n        href: '#'\n    },\n    {\n        label: \"Dove siamo\",\n        href: '#'\n    },\n    {\n        label: \"Menu\",\n        href: 'https://gleaming-quokka-256177.netlify.app/iframe.html?args=&id=components-menu--template&viewMode=story',\n        class: 'a--pointer-event',\n        target: '_self'\n    }\n]\n\nexport const mockupMenuWithMultiplePages = [\n    {\n        label: \"Home\",\n        href: '#',\n    },\n    {\n        label: \"Ristorante\",\n        href: '#'\n    },\n    {\n        label: \"Specialità\",\n        href: '#'\n    },\n    {\n        label: \"Menu\",\n        href: 'https://gleaming-quokka-256177.netlify.app/iframe.html?args=&id=components-menu--template&viewMode=story',\n        class: 'a--pointer-event',\n        target: '_self'\n    },\n]\n\nexport const mockupMenuMultilangItalian = [\n    {\n        label: \"Home\",\n        href: '#',\n    },\n    {\n        label: \"Ristorante\",\n        href: '#'\n    },\n    {\n        label: \"Specialità\",\n        href: '#'\n    },\n    {\n        label: \"Menu\",\n        href: 'https://gleaming-quokka-256177.netlify.app/iframe.html?args=&id=components-menu--template&viewMode=story',\n        class: 'a--pointer-event',\n        target: '_self'\n    },\n]\n\nexport const mockupMenuMultilangEnglish = [\n    {\n        label: \"Home\",\n        href: '#',\n    },\n    {\n        label: 'Restaurant',\n        href: '#'\n    },\n    {\n        label: \"Specialties\",\n        href: '#'\n    },\n    {\n        label: \"Menu\",\n        href: 'https://gleaming-quokka-256177.netlify.app/iframe.html?args=&id=components-menu--template&viewMode=story',\n        class: 'a--pointer-event',\n        target: '_self'\n    },\n]"],"names":["locales","useConfig","modelValue","items","__props","active","ref","_sfc_render","_ctx","_cache","menu","config","mockupMenu","mockupMenuWithFoodMenu","mockupMenuWithMultiplePages","mockupMenuMultilangItalian","mockupMenuMultilangEnglish"],"mappings":"yVAWA,KAAA,CAAA,QAAAA,GAAAC,shBCVA,KAAA,CAAA,WAAAC,EAAA,MAAAC,CAAA,EAAAC,EAIAC,EAAAC,EAAAJ,CAAA,+2BCDE,SAAAK,EAAAC,EAAAC,EAAA,uhCCHF,KAAA,CAAA,KAAAC,CAAA,EAAAN,EAIAF,EAAAI,EAAA,CAAA,CAAAI,EAAA,YAAA,ugDCcA,MAAAC,EAAAV,q7BCnBO,MAAMW,GAAa,CACtB,CACI,MAAO,OACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,UACP,KAAM,GACV,CACJ,EAEaC,GAAyB,CAClC,CACI,MAAO,OACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,OACP,KAAM,2GACN,MAAO,mBACP,OAAQ,OACZ,CACJ,EAEaC,GAA8B,CACvC,CACI,MAAO,OACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,OACP,KAAM,2GACN,MAAO,mBACP,OAAQ,OACZ,CACJ,EAEaC,GAA6B,CACtC,CACI,MAAO,OACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,OACP,KAAM,2GACN,MAAO,mBACP,OAAQ,OACZ,CACJ,EAEaC,GAA6B,CACtC,CACI,MAAO,OACP,KAAM,GACV,EACA,CACI,MAAO,aACP,KAAM,GACV,EACA,CACI,MAAO,cACP,KAAM,GACV,EACA,CACI,MAAO,OACP,KAAM,2GACN,MAAO,mBACP,OAAQ,OACZ,CACJ"}