cloudcommerce 0.6.2 → 0.6.4

package/packages/storefront/dist/server/chunks/pages/{all.42c985c2.mjs → all.7f368e08.mjs}

@@ -9,7 +9,7 @@ import 'node:os';
 import sizeOf from 'image-size';
 import 'magic-string';
 import 'node:stream';
-import { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, u as unescapeHTML, m as maybeRenderHead, d as renderSlot, e as renderComponent, f as renderHead, F as Fragment, s as spreadAttributes } from '../astro.7d9d5f6e.mjs';
+import { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, u as unescapeHTML, m as maybeRenderHead, d as renderSlot, e as renderComponent, f as renderHead, F as Fragment, s as spreadAttributes } from '../astro.a9f695c0.mjs';
 import api from '@cloudcommerce/api';
 import { reactive, computed, defineComponent, inject, useSSRContext, mergeProps, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, resolveComponent, withModifiers, Teleport, toDisplayString, createTextVNode } from 'vue';
 import { img, price, formatMoney, nickname, onPromotion } from '@ecomplus/utils';
@@ -19,6 +19,7 @@ import fs, { readFileSync } from 'node:fs';
 import config from '@cloudcommerce/config';
 import { resolve as resolve$1 } from 'path';
 /* empty css                               */import { useScroll, useElementHover, useDebounceFn, useTimeout, promiseTimeout } from '@vueuse/core';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -29,7 +30,7 @@ const _export_sfc = (sfc, props) => {
 };
 
 function isOutputFormat(value) {
-  return ["avif", "jpeg", "jpg", "png", "webp"].includes(value);
+  return ["avif", "jpeg", "jpg", "png", "webp", "svg"].includes(value);
 }
 function isOutputFormatSupportsAlpha(value) {
   return ["avif", "png", "webp"].includes(value);
@@ -132,6 +133,12 @@ class BaseSSRService {
 
 class SharpService extends BaseSSRService {
   async transform(inputBuffer, transform) {
+    if (transform.format === "svg") {
+      return {
+        data: inputBuffer,
+        format: transform.format
+      };
+    }
     const sharpImage = sharp$1(inputBuffer, { failOnError: false, pages: -1 });
     sharpImage.rotate();
     if (transform.width || transform.height) {
@@ -304,7 +311,7 @@ const getCMS = () => {
 };
 
 const _getConfig = () => {
-  const { VITE_ECOM_STORE_ID } = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true},{ECOM_STORE_ID:process.env.ECOM_STORE_ID,})) || process.env;
+  const { VITE_ECOM_STORE_ID } = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SITE":"\"https://ecom2-002.web.app\"","SSR":true},{ECOM_STORE_ID:process.env.ECOM_STORE_ID,})) || process.env;
   if (VITE_ECOM_STORE_ID) {
     config.set({ storeId: Number(VITE_ECOM_STORE_ID) });
   }
@@ -353,7 +360,9 @@ const _getConfig = () => {
 const emitter = new EventEmitter();
 const getConfig = _getConfig;
 if (!globalThis.api_prefetch_endpoints) {
-  globalThis.api_prefetch_endpoints = ["categories"];
+  globalThis.api_prefetch_endpoints = [
+    "categories?fields=_id,name,slug,parent,icon,pictures.0"
+  ];
 }
 if (!globalThis.storefront) {
   globalThis.storefront = {
@@ -409,7 +418,7 @@ const loadPageContext = async (Astro, {
       apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
     }
     prefetchResponses.forEach(({ config: { endpoint }, data }) => {
-      apiState[endpoint] = data.result || data;
+      apiState[endpoint.replace(/\?.*$/, "")] = data.result || data;
     });
   } catch (err) {
     const error = err;
@@ -560,7 +569,7 @@ async function getImage$1(transform) {
   }
   const resolved = await resolveTransform(transform);
   const attributes = await loader.getImageAttributes(resolved);
-  const isDev = (_b = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true},{SSR:true,}))) == null ? void 0 : _b.DEV;
+  const isDev = (_b = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SITE":"\"https://ecom2-002.web.app\"","SSR":true},{SSR:true,}))) == null ? void 0 : _b.DEV;
   const isLocalImage = !isRemoteImage(resolved.src);
   const _loader = isDev && isLocalImage ? globalThis.astroImage.defaultLoader : loader;
   if (!_loader) {
@@ -652,7 +661,7 @@ async function getPicture(params) {
 const tryImageSize = (src) => {
   let dimensions = {};
   if (typeof src === "string" && src.startsWith("/")) {
-    const { STOREFRONT_BASE_DIR } = Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true}, { STOREFRONT_BASE_DIR: process.env.STOREFRONT_BASE_DIR });
+    const { STOREFRONT_BASE_DIR } = Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SITE":"\"https://ecom2-002.web.app\"","SSR":true}, { STOREFRONT_BASE_DIR: process.env.STOREFRONT_BASE_DIR });
     try {
       dimensions = sizeOf(resolve$1(STOREFRONT_BASE_DIR, `public${src}`));
     } catch (e) {
@@ -700,9 +709,9 @@ const getImage = async (options) => {
   return imgAttrs;
 };
 
-const $$Astro$g = createAstro("https://ecom2-002.web.app");
+const $$Astro$i = createAstro("https://ecom2-002.web.app");
 const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$g, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$i, $$props, $$slots);
   Astro2.self = $$BaseHead;
   const {
     storeId,
@@ -762,17 +771,18 @@ ${cmsMetatags?.fb_app_id && renderTemplate`<meta property="fb:app_id"${addAttrib
 <meta name="twitter:card" content="summary">
 ${cmsMetatags?.twitter_username && renderTemplate`<meta name="twitter:site"${addAttribute(cmsMetatags.twitter_username, "content")}>`}
 <meta name="ecom-store-id"${addAttribute(String(storeId), "content")}>
+
 ${pwaInfo }
-`;
+${renderTemplate`<link rel="manifest" href="/manifest.webmanifest">`}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseHead.astro");
 
 var __freeze$1 = Object.freeze;
 var __defProp$1 = Object.defineProperty;
 var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
 var _a$1;
-const $$Astro$f = createAstro("https://ecom2-002.web.app");
+const $$Astro$h = createAstro("https://ecom2-002.web.app");
 const $$BaseStateJson = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$f, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$h, $$props, $$slots);
   Astro2.self = $$BaseStateJson;
   const {
     pageContext: {
@@ -832,9 +842,9 @@ window.storefront.context = ${JSON.stringify({
   return renderTemplate(_a$1 || (_a$1 = __template$1(["<script>", '<\/script>\n<script type="application/ld+json">', "<\/script>"])), unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseStateJson.astro");
 
-const $$Astro$e = createAstro("https://ecom2-002.web.app");
+const $$Astro$g = createAstro("https://ecom2-002.web.app");
 const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$g, $$props, $$slots);
   Astro2.self = $$BaseBody;
   return renderTemplate`${maybeRenderHead($$result)}<body>
   <div id="teleported-overlap" class="relative z-50"></div>
@@ -845,9 +855,9 @@ const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
 </body>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseBody.astro");
 
-const $$Astro$d = createAstro("https://ecom2-002.web.app");
+const $$Astro$f = createAstro("https://ecom2-002.web.app");
 const $$Base$1 = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$d, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$f, $$props, $$slots);
   Astro2.self = $$Base$1;
   const { pageContext, title } = Astro2.props;
   const { cms } = pageContext;
@@ -867,24 +877,24 @@ var __freeze = Object.freeze;
 var __defProp = Object.defineProperty;
 var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
 var _a;
-const $$Astro$c = createAstro("https://ecom2-002.web.app");
+const $$Astro$e = createAstro("https://ecom2-002.web.app");
 const $$InlineScripts = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$c, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
   Astro2.self = $$InlineScripts;
   return renderTemplate(_a || (_a = __template(["<script>\n  window.firebaseConfig = {\n    apiKey: 'AIzaSyCrVzemDgpyp9i6ni7Yc5ZuEVfXYwl-4J0',\n    authDomain: 'ecom2-002.firebaseapp.com',\n    projectId: 'ecom2-002',\n    storageBucket: 'ecom2-002.appspot.com',\n    messagingSenderId: '402807248219',\n    appId: '1:402807248219:web:cf7d57759751e74776367e',\n    measurementId: 'G-SC592CE0GB',\n  };\n<\/script>"])));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/scripts/InlineScripts.astro");
 
-const $$Astro$b = createAstro("https://ecom2-002.web.app");
+const $$Astro$d = createAstro("https://ecom2-002.web.app");
 const $$Base = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$b, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$d, $$props, $$slots);
   Astro2.self = $$Base;
   const { pageContext, title } = Astro2.props;
   return renderTemplate`${renderComponent($$result, "Base", $$Base$1, { "pageContext": pageContext, "title": title }, { "before-head-end": ($$result2) => renderTemplate`${renderComponent($$result2, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["default"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Base.astro");
 
-const $$Astro$a = createAstro("https://ecom2-002.web.app");
+const $$Astro$c = createAstro("https://ecom2-002.web.app");
 const $$Image = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$a, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$c, $$props, $$slots);
   Astro2.self = $$Image;
   const { loading = "lazy", decoding = "async", ...props } = Astro2.props;
   if (props.alt === void 0 || props.alt === null) {
@@ -894,9 +904,9 @@ const $$Image = createComponent(async ($$result, $$props, $$slots) => {
   return renderTemplate`${maybeRenderHead($$result)}<img${spreadAttributes(attrs)}${addAttribute(loading, "loading")}${addAttribute(decoding, "decoding")}>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/node_modules/@astrojs/image/components/Image.astro");
 
-const $$Astro$9 = createAstro("https://ecom2-002.web.app");
+const $$Astro$b = createAstro("https://ecom2-002.web.app");
 const $$Picture$1 = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$9, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$b, $$props, $$slots);
   Astro2.self = $$Picture$1;
   const {
     src,
@@ -948,9 +958,9 @@ The "alt" attribute holds a text description of the image, which isn't mandatory
 `);
 }
 
-const $$Astro$8 = createAstro("https://ecom2-002.web.app");
+const $$Astro$a = createAstro("https://ecom2-002.web.app");
 const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$a, $$props, $$slots);
   Astro2.self = $$Picture;
   const props = Astro2.props;
   if (!props.aspectRatio && typeof props.src === "string") {
@@ -1052,7 +1062,7 @@ const usePitchBar = (props) => {
 
 const carouselKey = Symbol("carousel");
 
-const _sfc_main$a = defineComponent({
+const _sfc_main$c = defineComponent({
   __name: "CarouselControl",
   props: {
     direction: { default: 1 }
@@ -1065,26 +1075,27 @@ const _sfc_main$a = defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<button${ssrRenderAttrs(mergeProps({
     type: "button",
     "aria-label": $props.direction > 0 ? "Pr\xF3ximo" : "Anterior",
-    "data-carousel-control": $props.direction > 0 ? "next" : "previous"
+    "data-carousel-control": $props.direction > 0 ? "next" : "previous",
+    class: "group"
   }, _attrs))}>`);
   ssrRenderSlot(_ctx.$slots, "default", {}, () => {
-    _push(`<i class="${ssrRenderClass([$props.direction > 0 ? "i-chevron-right" : "i-chevron-left", "m-0"])}"></i>`);
+    _push(`<i class="${ssrRenderClass([$props.direction > 0 ? "i-chevron-right group-active:translate-x-1" : "i-chevron-left group-active:-translate-x-1", "m-0"])}"></i>`);
   }, _push, _parent);
   _push(`</button>`);
 }
-const _sfc_setup$a = _sfc_main$a.setup;
-_sfc_main$a.setup = (props, ctx) => {
+const _sfc_setup$c = _sfc_main$c.setup;
+_sfc_main$c.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/CarouselControl.vue");
-  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
 };
-const CarouselControl = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
+const CarouselControl = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
 
-const _sfc_main$9 = defineComponent({
+const _sfc_main$b = defineComponent({
   __name: "Carousel",
   props: {
     as: { default: "ul" },
@@ -1221,7 +1232,7 @@ const _sfc_main$9 = defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(mergeProps({
     ref: "carousel",
     "data-carousel": ""
@@ -1275,15 +1286,15 @@ function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</div>`);
 }
-const _sfc_setup$9 = _sfc_main$9.setup;
-_sfc_main$9.setup = (props, ctx) => {
+const _sfc_setup$b = _sfc_main$b.setup;
+_sfc_main$b.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Carousel.vue");
-  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
+  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
 };
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PitchBar",
   props: {
     slides: null
@@ -1300,7 +1311,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(mergeProps({ class: "bg-base-100 relative z-1" }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
   _push(ssrRenderComponent($setup["Carousel"], {
     autoplay: $setup.countValidSlides > 1 ? 7e3 : null
@@ -1387,13 +1398,13 @@ function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div></div>`);
 }
-const _sfc_setup$8 = _sfc_main$8.setup;
-_sfc_main$8.setup = (props, ctx) => {
+const _sfc_setup$a = _sfc_main$a.setup;
+_sfc_main$a.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/PitchBar.vue");
-  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
+  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
 };
-const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
+const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
 
 const useStickyHeader = (props) => {
   const {
@@ -1437,21 +1448,49 @@ const useStickyHeader = (props) => {
   };
 };
 
-const filterMainCategories = (categories) => {
-  return categories.filter(({ slug, parent }) => {
+const filterMainCategories = (categories, featuredSlugs) => {
+  const mainCategories = categories.filter(({ slug, parent }) => {
     return slug && !parent;
   });
+  if (featuredSlugs?.length) {
+    mainCategories.sort((a, b) => {
+      const indexA = featuredSlugs.indexOf(a.slug);
+      const indexB = featuredSlugs.indexOf(b.slug);
+      if (indexA > -1) {
+        if (indexB === -1 || indexA < indexB)
+          return -1;
+        return 1;
+      }
+      if (indexB > -1)
+        return 1;
+      return 0;
+    });
+  }
+  return mainCategories;
 };
-const filterSubcategories = (categories, parentCategory) => {
-  return categories.filter(({ slug, parent }) => {
+const filterSubcategories = (categories, parentCategory, isAlphabeticalSort = false) => {
+  const subcategories = categories.filter(({ slug, parent }) => {
     if (slug && parent) {
       return parent._id === parentCategory._id || parent.slug && parent.slug === parentCategory.slug;
     }
     return false;
   });
+  if (isAlphabeticalSort) {
+    subcategories.sort((a, b) => {
+      if (a.name < b.name)
+        return -1;
+      return 1;
+    });
+  }
+  return subcategories;
 };
-const useShopHeader = (props) => {
-  const { header } = props;
+const useShopHeader = ({
+  header,
+  categories,
+  menuCategorySlugs,
+  menuRandomCategories = 7,
+  isAlphabeticalSortSubmenu
+}) => {
   const {
     isSticky,
     staticHeight,
@@ -1460,9 +1499,13 @@ const useShopHeader = (props) => {
   const positionY = computed(() => {
     return isSticky.value ? header.value.offsetHeight : staticY.value;
   });
-  const mainCategories = filterMainCategories(props.categories);
+  const mainCategories = filterMainCategories(categories, menuCategorySlugs);
   const getSubcategories = (parentCategory) => {
-    return filterSubcategories(props.categories, parentCategory);
+    return filterSubcategories(
+      categories,
+      parentCategory,
+      !!isAlphabeticalSortSubmenu
+    );
   };
   const getCategoryTree = (parentCategory) => {
     return {
@@ -1473,6 +1516,17 @@ const useShopHeader = (props) => {
     };
   };
   const categoryTrees = mainCategories.map(getCategoryTree);
+  let countRandom = 0;
+  const inlineMenuTrees = categoryTrees.filter(({ slug }) => {
+    if (menuCategorySlugs?.includes(slug)) {
+      return true;
+    }
+    if (countRandom < menuRandomCategories) {
+      countRandom += 1;
+      return true;
+    }
+    return false;
+  });
   const isSidenavOpen = ref(false);
   return {
     isSticky,
@@ -1483,11 +1537,12 @@ const useShopHeader = (props) => {
     getSubcategories,
     getCategoryTree,
     categoryTrees,
+    inlineMenuTrees,
     isSidenavOpen
   };
 };
 
-const _sfc_main$7 = defineComponent({
+const _sfc_main$9 = defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -1549,7 +1604,7 @@ const _sfc_main$7 = defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   _push(ssrRenderComponent(_component_Fade, mergeProps({
     slide: $setup.slideTo,
@@ -1646,13 +1701,13 @@ function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$7 = _sfc_main$7.setup;
-_sfc_main$7.setup = (props, ctx) => {
+const _sfc_setup$9 = _sfc_main$9.setup;
+_sfc_main$9.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Drawer.vue");
-  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
 };
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
 
 const useStorage = (key, initialValue, storage = globalThis.localStorage) => {
   if (!storage) {
@@ -1740,7 +1795,7 @@ userAgent.includes("Safari") && !userAgent.includes("Chrome");
 const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
 const isMobile = isIOS || /Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
 
-const _sfc_main$6 = defineComponent({
+const _sfc_main$8 = defineComponent({
   __name: "SocialNetworkIcon",
   props: {
     as: { default: "i" },
@@ -1774,18 +1829,18 @@ const _sfc_main$6 = defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), mergeProps({ class: $setup.iconClassName }, _attrs), null), _parent);
 }
-const _sfc_setup$6 = _sfc_main$6.setup;
-_sfc_main$6.setup = (props, ctx) => {
+const _sfc_setup$8 = _sfc_main$8.setup;
+_sfc_main$8.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkIcon.vue");
-  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
 };
-const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
+const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkLink",
   props: {
     network: null,
@@ -1811,7 +1866,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   _push(ssrRenderComponent(_component_ALink, mergeProps({ href: $setup.fixedHref }, _attrs), {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
@@ -1832,15 +1887,15 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$5 = _sfc_main$5.setup;
-_sfc_main$5.setup = (props, ctx) => {
+const _sfc_setup$7 = _sfc_main$7.setup;
+_sfc_main$7.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkLink.vue");
-  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
 };
-const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
 
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenavCategory",
   props: {
     categoryTree: null
@@ -1863,13 +1918,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_AImg = resolveComponent("AImg");
   const _component_ShopSidenavCategory = resolveComponent("ShopSidenavCategory", true);
   _push(`<li${ssrRenderAttrs(mergeProps({ class: "text-lg text-base-800" }, _attrs))}>`);
   if ($props.categoryTree.subcategories.length) {
     _push(`<details class="bg-white overflow-y-auto overflow-x-hidden z-10 open:absolute open:top-0 open:left-0 open:w-full open:h-full"><summary class="${ssrRenderClass([$setup.isOpen ? "bg-base-100" : null, "cursor-pointer list-none px-6 py-3 active:bg-base-100 transition-colors"])}"><i class="${ssrRenderClass(!$setup.isOpen ? "i-arrow-right float-right mb-0 mt-1 text-xl text-base-500" : "i-arrow-left text-lg")}"></i>`);
     if (!$setup.isOpen && $props.categoryTree.icon) {
-      _push(`<img loading="lazy"${ssrRenderAttr("src", $props.categoryTree.icon.url)} class="w-auto h-5 inline mr-3">`);
+      _push(ssrRenderComponent(_component_AImg, {
+        picture: $props.categoryTree.icon,
+        class: "w-auto h-5 inline mr-3"
+      }, null, _parent));
     } else {
       _push(`<!---->`);
     }
@@ -1884,7 +1943,10 @@ function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   } else {
     _push(`<a${ssrRenderAttr("href", `/${$props.categoryTree.slug}`)} class="block px-6 py-3 active:bg-base-200">`);
     if (!$setup.isOpen && $props.categoryTree.icon) {
-      _push(`<img loading="lazy"${ssrRenderAttr("src", $props.categoryTree.icon.url)} class="w-auto h-5 inline mr-3">`);
+      _push(ssrRenderComponent(_component_AImg, {
+        picture: $props.categoryTree.icon,
+        class: "w-auto h-5 inline mr-3"
+      }, null, _parent));
     } else {
       _push(`<!---->`);
     }
@@ -1892,15 +1954,15 @@ function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</li>`);
 }
-const _sfc_setup$4 = _sfc_main$4.setup;
-_sfc_main$4.setup = (props, ctx) => {
+const _sfc_setup$6 = _sfc_main$6.setup;
+_sfc_main$6.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenavCategory.vue");
-  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
 };
-const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenav",
   props: {
     categoryTrees: null
@@ -1921,7 +1983,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<aside${ssrRenderAttrs(mergeProps({ class: "flex flex-col h-full" }, _attrs))}><nav class="py-4 grow"><ul class="relative h-full"><!--[-->`);
   ssrRenderList($props.categoryTrees, (categoryTree) => {
     _push(ssrRenderComponent($setup["ShopSidenavCategory"], {
@@ -1946,18 +2008,450 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></footer></aside>`);
 }
+const _sfc_setup$5 = _sfc_main$5.setup;
+_sfc_main$5.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenav.vue");
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+};
+const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+
+const useShopHeaderSubmenu = (props) => {
+  const categoryPicture = computed(() => props.categoryTree.pictures?.[0]);
+  const subcategoriesWithChild = computed(() => {
+    return props.categoryTree.subcategories.filter(({ subcategories }) => subcategories.length);
+  });
+  const maxMenuCols = computed(() => {
+    let _maxMenuCols = subcategoriesWithChild.value.length;
+    if (categoryPicture.value) {
+      _maxMenuCols += 1;
+    }
+    if (subcategoriesWithChild.value.length < props.categoryTree.subcategories.length) {
+      _maxMenuCols += 1;
+    }
+    return _maxMenuCols;
+  });
+  const isMegaMenu = computed(() => {
+    return (props.megaMenuMaxCols || 7) >= maxMenuCols.value;
+  });
+  const subcategoryLinks = computed(() => {
+    return isMegaMenu.value ? props.categoryTree.subcategories.filter(({ subcategories }) => !subcategories.length) : props.categoryTree.subcategories;
+  });
+  const subcategoryCols = computed(() => {
+    return isMegaMenu.value ? props.categoryTree.subcategories.filter(({ subcategories }) => subcategories.length) : props.categoryTree.subcategories;
+  });
+  const countMenuCols = computed(() => {
+    if (isMegaMenu.value)
+      return maxMenuCols.value;
+    return categoryPicture.value ? 2 : 1;
+  });
+  return {
+    categoryPicture,
+    isMegaMenu,
+    subcategoryLinks,
+    subcategoryCols,
+    countMenuCols
+  };
+};
+
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ShopHeaderSubmenu",
+  props: {
+    categoryTree: null
+  },
+  setup(__props, { expose }) {
+    expose();
+    const props = __props;
+    const {
+      categoryPicture,
+      subcategoryLinks,
+      subcategoryCols,
+      countMenuCols
+    } = useShopHeaderSubmenu(props);
+    const __returned__ = { props, categoryPicture, subcategoryLinks, subcategoryCols, countMenuCols, get Popover() {
+      return Popover;
+    }, get PopoverButton() {
+      return PopoverButton;
+    }, get PopoverPanel() {
+      return PopoverPanel;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Fade = resolveComponent("Fade");
+  const _component_AImg = resolveComponent("AImg");
+  _push(ssrRenderComponent($setup["Popover"], _attrs, {
+    default: withCtx(({ open }, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(ssrRenderComponent($setup["PopoverButton"], { class: "outline-none" }, {
+          default: withCtx((_, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              ssrRenderSlot(_ctx.$slots, "button", { open }, null, _push3, _parent3, _scopeId2);
+            } else {
+              return [
+                renderSlot$1(_ctx.$slots, "button", { open })
+              ];
+            }
+          }),
+          _: 2
+        }, _parent2, _scopeId));
+        _push2(`<div class="relative"${_scopeId}>`);
+        _push2(ssrRenderComponent(_component_Fade, null, {
+          default: withCtx((_, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(ssrRenderComponent($setup["PopoverPanel"], {
+                class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded-md shadow bg-white text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
+              }, {
+                default: withCtx((_2, _push4, _parent4, _scopeId3) => {
+                  if (_push4) {
+                    _push4(`<div class="flex gap-6 w-full"${_scopeId3}>`);
+                    if ($setup.subcategoryLinks.length) {
+                      _push4(`<ul class="flex-1"${_scopeId3}><!--[-->`);
+                      ssrRenderList($setup.subcategoryLinks, (subcategory, i) => {
+                        _push4(`<li class="${ssrRenderClass($setup.subcategoryLinks.length > 10 ? "text-sm mb-1" : "mb-2")}"${_scopeId3}><a${ssrRenderAttr("href", `/${subcategory.slug}`)} class="hover:text-primary"${_scopeId3}><h3${_scopeId3}>${ssrInterpolate(subcategory.name)}</h3></a></li>`);
+                      });
+                      _push4(`<!--]--></ul>`);
+                    } else {
+                      _push4(`<!---->`);
+                    }
+                    _push4(`<!--[-->`);
+                    ssrRenderList($setup.subcategoryCols, (subcategory, i) => {
+                      _push4(`<div class="flex-1"${_scopeId3}><a${ssrRenderAttr("href", `/${subcategory.slug}`)} class="hover:text-primary"${_scopeId3}><h3${_scopeId3}>${ssrInterpolate(subcategory.name)}</h3></a><ul class="text-sm text-base-600 mt-1 mb-1.5"${_scopeId3}><!--[-->`);
+                      ssrRenderList(subcategory.subcategories, (nestedSubcategory, ii) => {
+                        _push4(`<li class="mb-0.5"${_scopeId3}><a${ssrRenderAttr("href", `/${nestedSubcategory.slug}`)} class="hover:text-primary hover:underline"${_scopeId3}><h3${_scopeId3}>${ssrInterpolate(nestedSubcategory.name)}</h3></a></li>`);
+                      });
+                      _push4(`<!--]--></ul></div>`);
+                    });
+                    _push4(`<!--]-->`);
+                    if ($setup.categoryPicture) {
+                      _push4(`<div class="${ssrRenderClass($setup.countMenuCols === 2 ? "basis-1/2" : $setup.countMenuCols < 5 ? "basis-2/5" : "basis-1/3")}"${_scopeId3}>`);
+                      _push4(ssrRenderComponent(_component_AImg, {
+                        picture: $setup.categoryPicture,
+                        class: "ml-auto rounded"
+                      }, null, _parent4, _scopeId3));
+                      _push4(`</div>`);
+                    } else {
+                      _push4(`<!---->`);
+                    }
+                    _push4(`</div><a${ssrRenderAttr("href", `/${$props.categoryTree.slug}`)} class="block mt-1 text-xs text-base-600 leading-snug underline"${_scopeId3}>${ssrInterpolate("Ver toda a categoria $1".replace("$1", $props.categoryTree.name))}</a>`);
+                  } else {
+                    return [
+                      createVNode("div", { class: "flex gap-6 w-full" }, [
+                        $setup.subcategoryLinks.length ? (openBlock(), createBlock("ul", {
+                          key: 0,
+                          class: "flex-1"
+                        }, [
+                          (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryLinks, (subcategory, i) => {
+                            return openBlock(), createBlock("li", {
+                              key: `link-${i}`,
+                              class: $setup.subcategoryLinks.length > 10 ? "text-sm mb-1" : "mb-2"
+                            }, [
+                              createVNode("a", {
+                                href: `/${subcategory.slug}`,
+                                class: "hover:text-primary"
+                              }, [
+                                createVNode("h3", null, toDisplayString(subcategory.name), 1)
+                              ], 8, ["href"])
+                            ], 2);
+                          }), 128))
+                        ])) : createCommentVNode("", true),
+                        (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryCols, (subcategory, i) => {
+                          return openBlock(), createBlock("div", {
+                            key: subcategory._id,
+                            class: "flex-1"
+                          }, [
+                            createVNode("a", {
+                              href: `/${subcategory.slug}`,
+                              class: "hover:text-primary"
+                            }, [
+                              createVNode("h3", null, toDisplayString(subcategory.name), 1)
+                            ], 8, ["href"]),
+                            createVNode("ul", { class: "text-sm text-base-600 mt-1 mb-1.5" }, [
+                              (openBlock(true), createBlock(Fragment$1, null, renderList(subcategory.subcategories, (nestedSubcategory, ii) => {
+                                return openBlock(), createBlock("li", {
+                                  key: `${i}-${ii}`,
+                                  class: "mb-0.5"
+                                }, [
+                                  createVNode("a", {
+                                    href: `/${nestedSubcategory.slug}`,
+                                    class: "hover:text-primary hover:underline"
+                                  }, [
+                                    createVNode("h3", null, toDisplayString(nestedSubcategory.name), 1)
+                                  ], 8, ["href"])
+                                ]);
+                              }), 128))
+                            ])
+                          ]);
+                        }), 128)),
+                        $setup.categoryPicture ? (openBlock(), createBlock("div", {
+                          key: 1,
+                          class: $setup.countMenuCols === 2 ? "basis-1/2" : $setup.countMenuCols < 5 ? "basis-2/5" : "basis-1/3"
+                        }, [
+                          createVNode(_component_AImg, {
+                            picture: $setup.categoryPicture,
+                            class: "ml-auto rounded"
+                          }, null, 8, ["picture"])
+                        ], 2)) : createCommentVNode("", true)
+                      ]),
+                      createVNode("a", {
+                        href: `/${$props.categoryTree.slug}`,
+                        class: "block mt-1 text-xs text-base-600 leading-snug underline"
+                      }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"])
+                    ];
+                  }
+                }),
+                _: 2
+              }, _parent3, _scopeId2));
+            } else {
+              return [
+                createVNode($setup["PopoverPanel"], {
+                  class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded-md shadow bg-white text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
+                }, {
+                  default: withCtx(() => [
+                    createVNode("div", { class: "flex gap-6 w-full" }, [
+                      $setup.subcategoryLinks.length ? (openBlock(), createBlock("ul", {
+                        key: 0,
+                        class: "flex-1"
+                      }, [
+                        (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryLinks, (subcategory, i) => {
+                          return openBlock(), createBlock("li", {
+                            key: `link-${i}`,
+                            class: $setup.subcategoryLinks.length > 10 ? "text-sm mb-1" : "mb-2"
+                          }, [
+                            createVNode("a", {
+                              href: `/${subcategory.slug}`,
+                              class: "hover:text-primary"
+                            }, [
+                              createVNode("h3", null, toDisplayString(subcategory.name), 1)
+                            ], 8, ["href"])
+                          ], 2);
+                        }), 128))
+                      ])) : createCommentVNode("", true),
+                      (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryCols, (subcategory, i) => {
+                        return openBlock(), createBlock("div", {
+                          key: subcategory._id,
+                          class: "flex-1"
+                        }, [
+                          createVNode("a", {
+                            href: `/${subcategory.slug}`,
+                            class: "hover:text-primary"
+                          }, [
+                            createVNode("h3", null, toDisplayString(subcategory.name), 1)
+                          ], 8, ["href"]),
+                          createVNode("ul", { class: "text-sm text-base-600 mt-1 mb-1.5" }, [
+                            (openBlock(true), createBlock(Fragment$1, null, renderList(subcategory.subcategories, (nestedSubcategory, ii) => {
+                              return openBlock(), createBlock("li", {
+                                key: `${i}-${ii}`,
+                                class: "mb-0.5"
+                              }, [
+                                createVNode("a", {
+                                  href: `/${nestedSubcategory.slug}`,
+                                  class: "hover:text-primary hover:underline"
+                                }, [
+                                  createVNode("h3", null, toDisplayString(nestedSubcategory.name), 1)
+                                ], 8, ["href"])
+                              ]);
+                            }), 128))
+                          ])
+                        ]);
+                      }), 128)),
+                      $setup.categoryPicture ? (openBlock(), createBlock("div", {
+                        key: 1,
+                        class: $setup.countMenuCols === 2 ? "basis-1/2" : $setup.countMenuCols < 5 ? "basis-2/5" : "basis-1/3"
+                      }, [
+                        createVNode(_component_AImg, {
+                          picture: $setup.categoryPicture,
+                          class: "ml-auto rounded"
+                        }, null, 8, ["picture"])
+                      ], 2)) : createCommentVNode("", true)
+                    ]),
+                    createVNode("a", {
+                      href: `/${$props.categoryTree.slug}`,
+                      class: "block mt-1 text-xs text-base-600 leading-snug underline"
+                    }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"])
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ];
+            }
+          }),
+          _: 2
+        }, _parent2, _scopeId));
+        _push2(`</div>`);
+      } else {
+        return [
+          createVNode($setup["PopoverButton"], { class: "outline-none" }, {
+            default: withCtx(() => [
+              renderSlot$1(_ctx.$slots, "button", { open })
+            ]),
+            _: 2
+          }, 1024),
+          createVNode("div", { class: "relative" }, [
+            createVNode(_component_Fade, null, {
+              default: withCtx(() => [
+                createVNode($setup["PopoverPanel"], {
+                  class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded-md shadow bg-white text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
+                }, {
+                  default: withCtx(() => [
+                    createVNode("div", { class: "flex gap-6 w-full" }, [
+                      $setup.subcategoryLinks.length ? (openBlock(), createBlock("ul", {
+                        key: 0,
+                        class: "flex-1"
+                      }, [
+                        (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryLinks, (subcategory, i) => {
+                          return openBlock(), createBlock("li", {
+                            key: `link-${i}`,
+                            class: $setup.subcategoryLinks.length > 10 ? "text-sm mb-1" : "mb-2"
+                          }, [
+                            createVNode("a", {
+                              href: `/${subcategory.slug}`,
+                              class: "hover:text-primary"
+                            }, [
+                              createVNode("h3", null, toDisplayString(subcategory.name), 1)
+                            ], 8, ["href"])
+                          ], 2);
+                        }), 128))
+                      ])) : createCommentVNode("", true),
+                      (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryCols, (subcategory, i) => {
+                        return openBlock(), createBlock("div", {
+                          key: subcategory._id,
+                          class: "flex-1"
+                        }, [
+                          createVNode("a", {
+                            href: `/${subcategory.slug}`,
+                            class: "hover:text-primary"
+                          }, [
+                            createVNode("h3", null, toDisplayString(subcategory.name), 1)
+                          ], 8, ["href"]),
+                          createVNode("ul", { class: "text-sm text-base-600 mt-1 mb-1.5" }, [
+                            (openBlock(true), createBlock(Fragment$1, null, renderList(subcategory.subcategories, (nestedSubcategory, ii) => {
+                              return openBlock(), createBlock("li", {
+                                key: `${i}-${ii}`,
+                                class: "mb-0.5"
+                              }, [
+                                createVNode("a", {
+                                  href: `/${nestedSubcategory.slug}`,
+                                  class: "hover:text-primary hover:underline"
+                                }, [
+                                  createVNode("h3", null, toDisplayString(nestedSubcategory.name), 1)
+                                ], 8, ["href"])
+                              ]);
+                            }), 128))
+                          ])
+                        ]);
+                      }), 128)),
+                      $setup.categoryPicture ? (openBlock(), createBlock("div", {
+                        key: 1,
+                        class: $setup.countMenuCols === 2 ? "basis-1/2" : $setup.countMenuCols < 5 ? "basis-2/5" : "basis-1/3"
+                      }, [
+                        createVNode(_component_AImg, {
+                          picture: $setup.categoryPicture,
+                          class: "ml-auto rounded"
+                        }, null, 8, ["picture"])
+                      ], 2)) : createCommentVNode("", true)
+                    ]),
+                    createVNode("a", {
+                      href: `/${$props.categoryTree.slug}`,
+                      class: "block mt-1 text-xs text-base-600 leading-snug underline"
+                    }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"])
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ])
+        ];
+      }
+    }),
+    _: 3
+  }, _parent));
+}
+const _sfc_setup$4 = _sfc_main$4.setup;
+_sfc_main$4.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeaderSubmenu.vue");
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+};
+const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "ShopHeaderMenu",
+  props: {
+    inlineMenuTrees: null
+  },
+  setup(__props, { expose }) {
+    expose();
+    const props = __props;
+    const hasOneLevelSubcategories = computed(() => {
+      return !!props.inlineMenuTrees.find(({ subcategories }) => !subcategories.length);
+    });
+    const __returned__ = { props, hasOneLevelSubcategories, ShopHeaderSubmenu };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<nav${ssrRenderAttrs(_attrs)}><ul class="${ssrRenderClass([$props.inlineMenuTrees.length < 7 ? "text-base" : "text-sm", "flex gap-4 xl:gap-5 text-base-700"])}"><!--[-->`);
+  ssrRenderList($props.inlineMenuTrees, (categoryTree, i) => {
+    _push(`<li>`);
+    if (categoryTree.subcategories.length) {
+      _push(ssrRenderComponent($setup["ShopHeaderSubmenu"], { "category-tree": categoryTree }, {
+        button: withCtx(({ open }, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<span class="hover:text-primary group"${_scopeId}><h3 class="${ssrRenderClass([[
+              $props.inlineMenuTrees.length < 7 ? "decoration-2" : null,
+              open ? "underline" : null
+            ], "group-hover:underline inline"])}"${_scopeId}>${ssrInterpolate(categoryTree.name)}</h3>`);
+            if ($setup.hasOneLevelSubcategories) {
+              _push2(`<i class="${ssrRenderClass([open ? "rotate-180" : null, "i-chevron-down ml-1 transition-transform text-base-400 group-hover:text-primary-subtle"])}"${_scopeId}></i>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</span>`);
+          } else {
+            return [
+              createVNode("span", { class: "hover:text-primary group" }, [
+                createVNode("h3", {
+                  class: ["group-hover:underline inline", [
+                    $props.inlineMenuTrees.length < 7 ? "decoration-2" : null,
+                    open ? "underline" : null
+                  ]]
+                }, toDisplayString(categoryTree.name), 3),
+                $setup.hasOneLevelSubcategories ? (openBlock(), createBlock("i", {
+                  key: 0,
+                  class: ["i-chevron-down ml-1 transition-transform text-base-400 group-hover:text-primary-subtle", open ? "rotate-180" : null]
+                }, null, 2)) : createCommentVNode("", true)
+              ])
+            ];
+          }
+        }),
+        _: 2
+      }, _parent));
+    } else {
+      _push(`<a${ssrRenderAttr("href", `/${categoryTree.slug}`)} class="hover:text-primary hover:underline decoration-2"><h3 class="inline">${ssrInterpolate(categoryTree.name)}</h3></a>`);
+    }
+    _push(`</li>`);
+  });
+  _push(`<!--]--></ul></nav>`);
+}
 const _sfc_setup$3 = _sfc_main$3.setup;
 _sfc_main$3.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenav.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeaderMenu.vue");
   return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
 };
-const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
+const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "ShopHeader",
   props: {
-    categories: null
+    categories: null,
+    menuCategorySlugs: null,
+    menuRandomCategories: null,
+    isAlphabeticalSortSubmenu: { type: Boolean }
   },
   setup(__props, { expose }) {
     expose();
@@ -1967,9 +2461,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       isSticky,
       positionY,
       categoryTrees,
+      inlineMenuTrees,
       isSidenavOpen
     } = useShopHeader({ ...props, header });
-    const __returned__ = { props, header, isSticky, positionY, categoryTrees, isSidenavOpen, Drawer, ShopSidenav };
+    const __returned__ = { props, header, isSticky, positionY, categoryTrees, inlineMenuTrees, isSidenavOpen, Drawer, ShopSidenav, ShopHeaderMenu };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -1981,9 +2476,10 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
       $setup.isSticky && !$setup.isSidenavOpen ? "bg-white/80" : "bg-white",
       $setup.isSticky ? "backdrop-blur-md shadow py-2 md:py-3" : "py-3 sm:py-4 md:py-5"
     ]]
-  }, _attrs))}><div class="container lg:max-w-7xl mx-auto px-1 lg:pl-3 grid grid-flow-col grid-cols-3 justify-between items-center md:grid-cols-none md:auto-cols-max"><div class="md:hidden"><button class="px-2 my-1"${ssrRenderAttr("aria-label", "Abrir/fechar menu")}><i class="${ssrRenderClass([$setup.isSidenavOpen ? "i-close" : "i-menu", "text-base-500 text-3xl"])}"></i></button></div>`);
+  }, _attrs))}><div class="container lg:max-w-7xl mx-auto px-1 lg:pl-3 grid grid-flow-col grid-cols-3 justify-between items-center lg:grid-cols-none lg:auto-cols-max"><div class="lg:hidden"><button class="px-2 my-1"${ssrRenderAttr("aria-label", "Abrir/fechar menu")}><i class="${ssrRenderClass([$setup.isSidenavOpen ? "i-close" : "i-menu", "text-base-500 text-3xl"])}"></i></button></div>`);
   ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push, _parent);
-  _push(`<nav class="hidden md:block"></nav><div class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800"><button${ssrRenderAttr("aria-label", "Buscar produtos")}><i class="i-search w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button><button class="hidden sm:block"${ssrRenderAttr("aria-label", "Minha conta")}><i class="i-account w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button><button${ssrRenderAttr("aria-label", "Abrir carrinho")}><i class="i-shopping-cart w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button></div></div>`);
+  _push(ssrRenderComponent($setup["ShopHeaderMenu"], mergeProps({ class: "hidden lg:block" }, { inlineMenuTrees: $setup.inlineMenuTrees }), null, _parent));
+  _push(`<div class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800"><button${ssrRenderAttr("aria-label", "Buscar produtos")}><i class="i-search w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button><button class="hidden sm:block"${ssrRenderAttr("aria-label", "Minha conta")}><i class="i-account w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button><button${ssrRenderAttr("aria-label", "Abrir carrinho")}><i class="i-shopping-cart w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button></div></div>`);
   _push(ssrRenderComponent($setup["Drawer"], {
     modelValue: $setup.isSidenavOpen,
     "onUpdate:modelValue": ($event) => $setup.isSidenavOpen = $event,
@@ -2013,9 +2509,9 @@ _sfc_main$2.setup = (props, ctx) => {
 };
 const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
 
-const $$Astro$7 = createAstro("https://ecom2-002.web.app");
+const $$Astro$9 = createAstro("https://ecom2-002.web.app");
 const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$7, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$9, $$props, $$slots);
   Astro2.self = $$PagesHeader;
   const {
     pageContext: {
@@ -2030,7 +2526,10 @@ const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
     pitchBar.slides = cmsHeader.pitch_bar;
   }
   const shopHeader = {
-    categories: apiState.categories
+    categories: apiState.categories,
+    menuCategorySlugs: cmsHeader.inline_menu_categories?.featured,
+    menuRandomCategories: cmsHeader.inline_menu_categories?.random,
+    isAlphabeticalSortSubmenu: cmsHeader.alphabetical_sort_submenu
   };
   const LogoHeading = Astro2.props.logoHeading || (isHomepage ? "h1" : "h2");
   return renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["pitch-bar"], renderTemplate`
@@ -2045,14 +2544,14 @@ const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
   `)}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/PagesHeader.astro");
 
-const $$Astro$6 = createAstro("https://ecom2-002.web.app");
+const $$Astro$8 = createAstro("https://ecom2-002.web.app");
 const $$Pages = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$6, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
   Astro2.self = $$Pages;
   const { pageContext, title } = Astro2.props;
   const { settings } = pageContext;
   return renderTemplate`${renderComponent($$result, "Base", $$Base, { "pageContext": pageContext, "title": title }, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["header"], renderTemplate`
-    ${renderComponent($$result2, "Header", $$PagesHeader, { "pageContext": pageContext }, { "logo-picture": ($$result3) => renderTemplate`${renderComponent($$result3, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high", "class": "hover:drop-shadow-sm" })}` })}
+    ${renderComponent($$result2, "Header", $$PagesHeader, { "pageContext": pageContext }, { "logo-picture": ($$result3) => renderTemplate`${renderComponent($$result3, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm" })}` })}
   `)}${renderSlot($$result2, $$slots["default"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Pages.astro");
 
@@ -2505,9 +3004,9 @@ _sfc_main.setup = (props, ctx) => {
 };
 const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
 
-const $$Astro$5 = createAstro("https://ecom2-002.web.app");
+const $$Astro$7 = createAstro("https://ecom2-002.web.app");
 const $$Home = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$5, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$7, $$props, $$slots);
   Astro2.self = $$Home;
   const products = (await api.get("products")).data.result;
   return renderTemplate`${maybeRenderHead($$result)}<main>
@@ -2555,9 +3054,9 @@ const $$Home = createComponent(async ($$result, $$props, $$slots) => {
 </main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Home.astro");
 
-const $$Astro$4 = createAstro("https://ecom2-002.web.app");
+const $$Astro$6 = createAstro("https://ecom2-002.web.app");
 const $$Index$1 = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$6, $$props, $$slots);
   Astro2.self = $$Index$1;
   let pageContext;
   let loadError;
@@ -2575,12 +3074,50 @@ ${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment,
 </html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro");
 
-const $$file$3 = "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro";
-const $$url$3 = "";
+const $$file$4 = "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro";
+const $$url$4 = "";
 
 const _page1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: $$Index$1,
+  file: $$file$4,
+  url: $$url$4
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const $$Astro$5 = createAstro("https://ecom2-002.web.app");
+const $$Fallback$1 = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$5, $$props, $$slots);
+  Astro2.self = $$Fallback$1;
+  return renderTemplate`${maybeRenderHead($$result)}<main>
+  <h1>Error :/</h1>
+  <p class="instructions">
+    Check out the <code>src/pages</code> directory to get started.<br>
+    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+  </p>
+</main>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Fallback.astro");
+
+const $$Astro$4 = createAstro("https://ecom2-002.web.app");
+const $$Fallback = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
+  Astro2.self = $$Fallback;
+  let pageContext;
+  try {
+    pageContext = await loadPageContext(Astro2);
+  } catch (err) {
+    return err.astroResponse;
+  }
+  return renderTemplate`<html${addAttribute(pageContext?.lang.replace("_", "-"), "lang")}>
+${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "FallbackMain", $$Fallback$1, { "pageContext": pageContext })}` })}
+</html>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro");
+
+const $$file$3 = "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro";
+const $$url$3 = "/fallback";
+
+const _page2 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$Fallback,
   file: $$file$3,
   url: $$url$3
 }, Symbol.toStringTag, { value: 'Module' }));
@@ -2674,4 +3211,4 @@ const _page5 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   url: $$url
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { $$Pages as $, _export_sfc as _, _page0 as a, _page1 as b, _page3 as c, _page4 as d, _page5 as e, loadPageContext as l };
+export { _export_sfc as _, _page0 as a, _page1 as b, _page2 as c, _page3 as d, _page4 as e, _page5 as f };