cloudcommerce 0.3.0 → 0.4.1

package/packages/storefront/dist/server/entry.mjs

@@ -2,7 +2,7 @@ import { performance } from 'node:perf_hooks';
 import { ReadableStream, ByteLengthQueuingStrategy, CountQueuingStrategy, ReadableByteStreamController, ReadableStreamBYOBReader, ReadableStreamBYOBRequest, ReadableStreamDefaultController, ReadableStreamDefaultReader, TransformStream, WritableStream, WritableStreamDefaultController, WritableStreamDefaultWriter } from 'node:stream/web';
 import * as undici from 'undici';
 import { setTimeout as setTimeout$1, clearTimeout as clearTimeout$1 } from 'node:timers';
-import { N as NodeApp, g as server_default, h as deserializeManifest } from './chunks/astro.89bd9221.mjs';
+import { N as NodeApp, g as server_default, h as deserializeManifest } from './chunks/astro.0f5b754a.mjs';
 import { Readable } from 'stream';
 import https from 'https';
 import path from 'path';
@@ -10,11 +10,12 @@ import { fileURLToPath } from 'url';
 import fs from 'fs';
 import http from 'http';
 import send from 'send';
+import enableDestroy from 'server-destroy';
 import { defineComponent, computed, unref, useSSRContext, mergeProps, h as h$2, createSSRApp } from 'vue';
 import { ssrRenderSlotInner, ssrRenderAttrs, ssrRenderSlot, renderToString } from 'vue/server-renderer';
 import { i18n, formatMoney } from '@ecomplus/utils';
-/* empty css                                  */import { _ as _page0, a as _page1, b as _page3, c as _page4, d as _page5 } from './chunks/pages/all.23de4e5c.mjs';
-import { _ as _page2 } from './chunks/prerender.f40361a3.mjs';
+/* empty css                                  */import { _ as _page0, a as _page1, b as _page3, c as _page4, d as _page5 } from './chunks/pages/all.671e6bc1.mjs';
+import { _ as _page2 } from './chunks/prerender.fd8cdc24.mjs';
 import 'path-to-regexp';
 import 'tls';
 import 'mime';
@@ -2998,7 +2999,8 @@ function createServer({ client, port, host, removeBase }, handler) {
     if (req.url) {
       let pathname = removeBase(req.url);
       pathname = pathname[0] === "/" ? pathname : "/" + pathname;
-      const stream = send(req, encodeURI(pathname), {
+      pathname = new URL(pathname, `http://${host}:${port}`).pathname;
+      const stream = send(req, encodeURI(decodeURI(pathname)), {
         root: fileURLToPath(client),
         dotfiles: pathname.startsWith("/.well-known/") ? "allow" : "deny"
       });
@@ -3033,6 +3035,7 @@ function createServer({ client, port, host, removeBase }, handler) {
     httpServer = http.createServer(listener);
   }
   httpServer.listen(port, host);
+  enableDestroy(httpServer);
   const closed = new Promise((resolve, reject) => {
     httpServer.addListener("close", resolve);
     httpServer.addListener("error", reject);
@@ -3046,7 +3049,7 @@ function createServer({ client, port, host, removeBase }, handler) {
     server: httpServer,
     stop: async () => {
       await new Promise((resolve, reject) => {
-        httpServer.close((err) => err ? reject(err) : resolve(void 0));
+        httpServer.destroy((err) => err ? reject(err) : resolve(void 0));
       });
     }
   };
@@ -3074,7 +3077,7 @@ function getResolvedHostForHttpServer(host) {
     return host;
   }
 }
-function startServer(app, options) {
+function startServer$1(app, options) {
   const port = process.env.PORT ? Number(process.env.PORT) : options.port ?? 8080;
   const { client } = resolvePaths(options);
   const handler = middleware_default(app, options.mode);
@@ -3092,7 +3095,10 @@ function startServer(app, options) {
   );
   const protocol = server.server instanceof https.Server ? "https" : "http";
   console.log(`Server listening on ${protocol}://${host}:${port}`);
-  return server.closed();
+  return {
+    server,
+    done: server.closed()
+  };
 }
 
 polyfill(globalThis, {
@@ -3101,7 +3107,8 @@ polyfill(globalThis, {
 function createExports(manifest, options) {
   const app = new NodeApp(manifest);
   return {
-    handler: middleware_default(app, options.mode)
+    handler: middleware_default(app, options.mode),
+    startServer: () => startServer$1(app, options)
   };
 }
 function start(manifest, options) {
@@ -3109,7 +3116,7 @@ function start(manifest, options) {
     return;
   }
   const app = new NodeApp(manifest);
-  startServer(app, options);
+  startServer$1(app, options);
 }
 
 const adapter = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
@@ -3318,20 +3325,21 @@ const _renderer1 = {
 	renderToStaticMarkup,
 };
 
-const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.13.0_astro@2.0.2+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5],]);
+const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.14.0_astro@2.0.6+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5],]);
 const renderers = [Object.assign({"name":"astro:jsx","serverEntrypoint":"astro/jsx/server.js","jsxImportSource":"astro"}, { ssr: server_default }),Object.assign({"name":"@astrojs/vue","clientEntrypoint":"@astrojs/vue/client.js","serverEntrypoint":"@astrojs/vue/server.js"}, { ssr: _renderer1 }),];
 
-const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"fallback/index.html","links":[],"scripts":[],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.13.0_astro@2.0.2+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.32968ccf.css","_astro/index.90df622b.css"],"scripts":[{"type":"external","value":"_astro/hoisted.6edd7364.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.32968ccf.css"],"scripts":[{"type":"external","value":"_astro/hoisted.6edd7364.js"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true,"contentDir":"file:///home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/content/"},"pageMap":null,"renderers":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","@@sf/components/Prices.vue":"_astro/Prices.6fbcb5ac.js","@@sf/components/PitchBar.vue":"_astro/PitchBar.209c6645.js","@@sf/components/ProductCard.vue":"_astro/ProductCard.ee5eee91.js","/astro/hoisted.js?q=0":"_astro/hoisted.6edd7364.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.295a6886.js","@astrojs/vue/client.js":"_astro/client.5a46cc02.js","@@sf/components/ShopHeader.vue":"_astro/ShopHeader.b801c785.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.90df622b.css","/_astro/server.60de185d.css","/_astro/_...slug_.32968ccf.css","/manifest.webmanifest","/registerSW.js","/robots.txt","/sw.js","/workbox-e2ee76b5.js","/_astro/PitchBar.209c6645.js","/_astro/Prices.6fbcb5ac.js","/_astro/Prices.vue_vue_type_script_setup_true_lang.44f23680.js","/_astro/ProductCard.ee5eee91.js","/_astro/ShopHeader.b801c785.js","/_astro/client.5a46cc02.js","/_astro/ecom-utils.92f137f6.js","/_astro/hoisted.6edd7364.js","/_astro/index.844a4059.js","/_astro/modules-info.d9373e21.js","/_astro/runtime-core.esm-bundler.f04cee62.js","/_astro/runtime-dom.esm-bundler.00313542.js","/_astro/session-utm.72684b84.js","/_astro/use-component-variant.58788b6e.js","/_astro/workbox-window.prod.es5.295a6886.js","/admin/config.json","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner1.png","/img/uploads/banner2.png","/img/uploads/banner2.webp","/img/uploads/favicon.png","/img/uploads/headless.png","/img/uploads/headphone.png","/img/uploads/headphone.webp","/img/uploads/icon.png","/img/uploads/large-icon.png","/img/uploads/logo.png","/img/uploads/logo.webp","/img/uploads/og-image.png","/img/uploads/passion.png","/img/uploads/passion.webp","/img/uploads/pwa-reliable.png","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.png","/img/uploads/rect89.webp","/img/uploads/ssl-safe.png","/assets/icons/bootstrap-icons/font/storefront-icons.woff2","/assets/icons/feather-icons/font/storefront-icons.woff2","/assets/icons/font-awesome/font/storefront-icons.woff2","/assets/icons/line-awesome/font/storefront-icons.woff2","/assets/icons/tabler-icons/font/storefront-icons.woff2","/fallback/index.html"]}), {
+const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"fallback/index.html","links":[],"scripts":[],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.14.0_astro@2.0.6+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.bcc33d9d.css","_astro/index.0c833781.css"],"scripts":[{"type":"external","value":"_astro/hoisted.6edd7364.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.bcc33d9d.css"],"scripts":[{"type":"external","value":"_astro/hoisted.6edd7364.js"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true,"contentDir":"file:///home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/content/"},"pageMap":null,"renderers":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","~/components/PitchBar.vue":"_astro/PitchBar.004b6ea4.js","~/components/Prices.vue":"_astro/Prices.f311909a.js","@@sf/components/ProductCard.vue":"_astro/ProductCard.34de5097.js","@astrojs/vue/client.js":"_astro/client.56d86c9b.js","/astro/hoisted.js?q=0":"_astro/hoisted.6edd7364.js","@@sf/components/ShopHeader.vue":"_astro/ShopHeader.cbfee289.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.295a6886.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.0c833781.css","/_astro/server.60de185d.css","/_astro/_...slug_.bcc33d9d.css","/manifest.webmanifest","/registerSW.js","/robots.txt","/sw.js","/workbox-e2ee76b5.js","/_astro/PitchBar.004b6ea4.js","/_astro/Prices.f311909a.js","/_astro/Prices.vue_vue_type_script_setup_true_lang.ef47de70.js","/_astro/ProductCard.34de5097.js","/_astro/ShopHeader.cbfee289.js","/_astro/client.56d86c9b.js","/_astro/ecom-utils.92f137f6.js","/_astro/hoisted.6edd7364.js","/_astro/index.2d12be6c.js","/_astro/modules-info.0debb0b0.js","/_astro/runtime-core.esm-bundler.a0432a8e.js","/_astro/runtime-dom.esm-bundler.0e5774ce.js","/_astro/session-utm.72684b84.js","/_astro/workbox-window.prod.es5.295a6886.js","/admin/config.json","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner1.png","/img/uploads/banner2.png","/img/uploads/banner2.webp","/img/uploads/favicon.png","/img/uploads/headless.png","/img/uploads/headphone.png","/img/uploads/headphone.webp","/img/uploads/icon.png","/img/uploads/large-icon.png","/img/uploads/logo.png","/img/uploads/logo.webp","/img/uploads/og-image.png","/img/uploads/passion.png","/img/uploads/passion.webp","/img/uploads/pwa-reliable.png","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.png","/img/uploads/rect89.webp","/img/uploads/ssl-safe.png","/assets/icons/bootstrap-icons/font/storefront-icons.woff2","/assets/icons/feather-icons/font/storefront-icons.woff2","/assets/icons/font-awesome/font/storefront-icons.woff2","/assets/icons/line-awesome/font/storefront-icons.woff2","/assets/icons/tabler-icons/font/storefront-icons.woff2","/fallback/index.html"]}), {
 	pageMap: pageMap,
 	renderers: renderers
 });
 const _args = {"mode":"middleware","client":"file:///home/leo/code/ecomplus/cloud-commerce/packages/storefront/dist/client/","server":"file:///home/leo/code/ecomplus/cloud-commerce/packages/storefront/dist/server/","host":false,"port":3000};
 const _exports = createExports(_manifest, _args);
 const handler = _exports['handler'];
+const startServer = _exports['startServer'];
 
 const _start = 'start';
 if(_start in adapter) {
 	adapter[_start](_manifest, _args);
 }
 
-export { handler, pageMap, renderers };
+export { handler, pageMap, renderers, startServer };

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -25,34 +25,34 @@
     "prepare-monorepo": "sh scripts/prepare-monorepo.sh"
   },
   "dependencies": {
-    "@astrojs/image": "^0.13.0",
-    "@astrojs/node": "^5.0.1",
+    "@astrojs/image": "^0.14.0",
+    "@astrojs/node": "^5.0.3",
     "@astrojs/partytown": "^1.0.3",
-    "@astrojs/prefetch": "^0.1.1",
-    "@astrojs/vue": "^2.0.0",
+    "@astrojs/prefetch": "^0.1.2",
+    "@astrojs/vue": "^2.0.1",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.3",
     "@fastify/deepmerge": "^1.3.0",
-    "@headlessui/vue": "^1.7.8",
+    "@headlessui/vue": "^1.7.9",
     "@iconify-json/fa6-brands": "^1.1.8",
     "@iconify-json/heroicons": "^1.1.8",
     "@iconify-json/logos": "^1.1.22",
     "@vite-pwa/astro": "^0.0.1",
     "@vueuse/core": "^9.12.0",
-    "astro": "^2.0.2",
+    "astro": "^2.0.6",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
-    "firebase": "^9.16.0",
+    "firebase": "^9.17.1",
     "image-size": "^1.0.2",
     "semver": "^7.3.8",
     "sharp": "^0.31.3",
     "tailwindcss": "^3.2.4",
-    "unocss": "^0.49.1",
-    "vite": "^4.0.4",
+    "unocss": "^0.49.4",
+    "vite": "^4.1.1",
     "vite-plugin-pwa": "^0.14.1",
-    "vue": "^3.2.45"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

package/packages/storefront/src/lib/components/Drawer.vue

@@ -5,29 +5,27 @@ import {
   computed,
   watch,
 } from 'vue';
-import useComponentVariant from '@@sf/composables/use-component-variant';
 
 export interface Props {
   modelValue?: boolean;
   placement?: 'start' | 'end' | 'top' | 'bottom';
-  isTeleported?: boolean;
+  position?: 'fixed' | 'absolute';
   hasCloseButton?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   placement: 'start',
-  isTeleported: false,
+  position: 'fixed',
   hasCloseButton: true,
 });
 const emit = defineEmits([
   'update:modelValue',
 ]);
 const close = () => emit('update:modelValue', false);
-const anchor = ref(null);
-const canvas = ref(null);
+const drawer = ref(null);
 const outsideClickListener = (ev: MouseEvent) => {
-  if (!canvas.value?.contains(ev.target)) {
+  if (!drawer.value?.contains(ev.target)) {
     close();
   }
 };
@@ -37,23 +35,14 @@ const escClickListener = (ev: KeyboardEvent) => {
   }
 };
 watch(toRef(props, 'modelValue'), async (isOpen) => {
-  const header = anchor.value.closest('[class*="backdrop-"]');
   if (isOpen) {
     document.body.style.overflow = 'hidden';
-    if (header) {
-      header.style.backdropFilter = 'none';
-    }
     setTimeout(() => {
       document.addEventListener('click', outsideClickListener, { passive: true });
       document.addEventListener('keydown', escClickListener, { passive: true });
     }, 500);
   } else {
     document.body.style.overflow = null;
-    if (header) {
-      setTimeout(() => {
-        header.style.backdropFilter = null;
-      }, 500);
-    }
     document.removeEventListener('click', outsideClickListener);
     document.removeEventListener('keydown', escClickListener);
   }
@@ -66,38 +55,52 @@ const slideTo = computed(() => {
     default: return 'down';
   }
 });
-const componentVariant = useComponentVariant(props, ['placement']);
+const isFixed = computed(() => {
+  return props.position === 'fixed';
+});
+const isPlacementX = computed(() => {
+  return props.placement === 'start' || props.placement === 'end';
+});
 </script>
 
 <template>
-  <div ref="anchor" class="relative">
-    <Teleport to="#teleported" :disabled="!isTeleported">
-      <Fade :slide="slideTo" speed="slow" is-floating>
-        <dialog
-          v-if="modelValue"
-          class="w-screen max-w-sm p-0 z-50"
-          :class="isTeleported ? 'fixed top-0 left-0' : 'absolute'"
-          :open="modelValue"
-          :data-drawer="componentVariant"
+  <Fade :slide="slideTo" speed="slow" is-floating>
+    <dialog
+      v-if="modelValue"
+      ref="drawer"
+      class="w-screen max-w-sm shadow p-0 m-0 z-50"
+      :class="[
+        position,
+        isFixed ? `top-0 left-0 ${(isPlacementX ? 'h-screen' : '')}` : null,
+      ]"
+      :open="modelValue"
+      :data-drawer="placement"
+    >
+      <div class="relative">
+        <button
+          v-if="hasCloseButton"
+          type="button"
+          :aria-label="$t.i19close"
+          @click.prevent="close"
+          class="absolute top-2"
+          :class="placement === 'end' ? 'left-2' : 'right-2'"
+          data-drawer-close
         >
-          <div ref="canvas" class="relative">
-            <button
-              v-if="hasCloseButton"
-              type="button"
-              :aria-label="$t.i19close"
-              @click.prevent="close"
-              class="absolute top-2"
-              :class="placement === 'end' ? 'left-2' : 'right-2'"
-              data-drawer-close
-            >
-              <slot name="close">
-                <i class="i-close text-base-400 text-3xl"></i>
-              </slot>
-            </button>
-            <slot />
-          </div>
-        </dialog>
-      </Fade>
-    </Teleport>
-  </div>
+          <slot name="close">
+            <i class="i-close text-base-400 text-3xl"></i>
+          </slot>
+        </button>
+        <slot />
+      </div>
+      <Teleport to="#teleported-top">
+        <Fade>
+          <div
+            v-if="modelValue"
+            class="fixed top-0 left-0 w-screen h-screen bg-black/50 z-40"
+            data-drawer-backdrop
+          ></div>
+        </Fade>
+      </Teleport>
+    </dialog>
+  </Fade>
 </template>

package/packages/storefront/src/lib/components/ProductCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import Prices from '@@sf/components/Prices.vue';
+import Prices from '~/components/Prices.vue';
 
 export interface Props {
   as?: string;

package/packages/storefront/src/lib/components/ShopHeader.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import type { CategoriesList } from '@cloudcommerce/api/types';
+import { ref, computed } from 'vue';
 import { i19myAccount, i19openCart, i19searchProducts } from '@@i18n';
+import useStickyHeader from '@@sf/composables/use-sticky-header';
 import Drawer from '@@sf/components/Drawer.vue';
-import StickyHeader from '@@sf/components/StickyHeader.vue';
+import ShopSidenav from '@@sf/components/ShopSidenav.vue';
 
+export interface Props {
+  categories: CategoriesList;
+}
+
+defineProps<Props>();
 const buttons = ref({
   search: {
     icon: 'i-search',
@@ -22,16 +29,29 @@ const buttons = ref({
   },
 });
 const isSidenavOpen = ref(false);
+const header = ref<HTMLElement | null>(null);
+const {
+  isSticky,
+  staticHeight,
+  staticY,
+} = useStickyHeader({ header });
+const sidenavHeight = computed(() => {
+  return isSticky.value ? staticHeight.value : staticY.value;
+});
 </script>
 
 <template>
-  <StickyHeader>
-    <div
-      class="container lg:max-w-7xl mx-auto px-1 lg:pl-3
+  <header
+    ref="header"
+    class="top-0 z-50 transition-colors"
+    :class="[
+      isSticky && !isSidenavOpen ? 'bg-white/80' : 'bg-white',
+      isSticky ? 'backdrop-blur-md shadow py-2 md:py-3' : 'py-3 sm:py-4 md:py-5',
+    ]"
+  >
+    <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"
-      data-header
-    >
+      md:grid-cols-none md:auto-cols-max">
       <slot name="sidenav-toggle">
         <div class="md:hidden" data-sidenav-toggle>
           <button
@@ -40,12 +60,12 @@ const isSidenavOpen = ref(false);
             @click="isSidenavOpen = !isSidenavOpen"
           >
             <slot name="sidenav-toggle-content">
-              <i class="i-menu text-base-500 text-3xl"></i>
+              <i
+                class="text-base-500 text-3xl"
+                :class="isSidenavOpen ? 'i-close' : 'i-menu'"
+              ></i>
             </slot>
           </button>
-          <Drawer v-model="isSidenavOpen" class="-ml-1 lg:-ml-3">
-            MENU
-          </Drawer>
         </div>
       </slot>
       <slot name="logo" />
@@ -78,5 +98,14 @@ const isSidenavOpen = ref(false);
         </div>
       </slot>
     </div>
-  </StickyHeader>
+    <Drawer
+      v-model="isSidenavOpen"
+      :has-close-button="false"
+      position="absolute"
+      class="mt-2 -z-1"
+      :style="{ height: `calc(100vh - ${sidenavHeight}px + .5rem)` }"
+    >
+      <ShopSidenav class="bg-white pt-6" :categories="categories" />
+    </Drawer>
+  </header>
 </template>

package/packages/storefront/src/lib/components/ShopSidenav.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { CategoriesList } from '@cloudcommerce/api/types';
+
+export interface Props {
+  categories: CategoriesList;
+}
+
+const props = defineProps<Props>();
+const mainCategories = props.categories.filter(({ slug, parent }) => {
+  return slug && !parent;
+});
+</script>
+
+<template>
+  <aside data-sidenav>
+    <nav class="py-5" data-sidenav-nav>
+      <ul>
+        <li v-for="mainCategory in mainCategories" :key="mainCategory._id">
+          <a :href="`/${mainCategory.slug}`">
+            {{ mainCategory.name }}
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+</template>

package/packages/storefront/src/lib/composables/use-pitch-bar.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue';
+import { parseShippingPhrase } from '@@sf/state/modules-info';
+
+export interface Props {
+  slides: Array<{
+    href?: string;
+    target?: string;
+    html: string;
+  }>;
+}
+
+const usePitchBar = (props: Props) => {
+  const parsedContents = computed(() => {
+    return props.slides.map(({ html }) => {
+      return parseShippingPhrase(html).value;
+    });
+  });
+  const countValidSlides = computed(() => {
+    return parsedContents.value.filter((html) => html).length;
+  });
+  return {
+    parsedContents,
+    countValidSlides,
+  };
+};
+
+export default usePitchBar;

package/packages/storefront/src/lib/composables/use-sticky-header.ts

@@ -0,0 +1,111 @@
+import type { Ref } from 'vue';
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+} from 'vue';
+import {
+  promiseTimeout,
+  useTimeout,
+  useDebounceFn,
+  useScroll,
+} from '@vueuse/core';
+
+export interface Props {
+  header: Ref<HTMLElement>;
+  canSetStyles?: boolean;
+  canCreateHeightDiv?: boolean;
+  isShownOnScrollDown?: boolean;
+}
+
+const useStickyHeader = (props: Props) => {
+  const {
+    header,
+    canSetStyles,
+    canCreateHeightDiv,
+    isShownOnScrollDown,
+  } = {
+    canSetStyles: true,
+    canCreateHeightDiv: true,
+    ...props,
+  };
+  const { ready, start } = useTimeout(100, { controls: true, immediate: false });
+  const staticHeight = ref(0);
+  const staticY = ref(0);
+  let heightDiv: HTMLElement | undefined;
+  const { y } = !import.meta.env.SSR ? useScroll(document) : { y: ref(0) };
+  const isSticky = computed(() => ready.value && y.value > staticY.value * 1.2);
+  const transition = ref('none');
+  watch(isSticky, async (_isSticky) => {
+    if (canSetStyles) {
+      header.value.style.position = _isSticky ? 'sticky' : null;
+    }
+    if (heightDiv) {
+      heightDiv.style.height = _isSticky ? `${staticHeight.value}px` : null;
+    }
+    if (!_isSticky) {
+      start();
+      transition.value = 'none';
+    } else {
+      await promiseTimeout(300);
+      transition.value = 'opacity var(--transition-slow), transform var(--transition)';
+    }
+  });
+  const isScrollUp = ref(false);
+  watch(y, (newY, oldY) => {
+    isScrollUp.value = newY > 0 && newY < oldY;
+  });
+  if (!import.meta.env.SSR) {
+    onMounted(() => {
+      const fixHeight = () => {
+        staticHeight.value = header.value.offsetHeight;
+        staticY.value = staticHeight.value
+          + window.pageYOffset + header.value.getBoundingClientRect().top;
+        start();
+      };
+      const imgs = header.value.getElementsByTagName('IMG');
+      let isAllLoaded = true;
+      for (let i = 0; i < imgs.length; i++) {
+        const img = imgs[i] as HTMLImageElement;
+        if (!img.complete || img.naturalHeight === 0) {
+          isAllLoaded = false;
+          img.onload = fixHeight;
+        }
+      }
+      if (isAllLoaded) {
+        fixHeight();
+      }
+      window.addEventListener('resize', useDebounceFn(fixHeight, 300));
+      if (canSetStyles) {
+        header.value.style.willChange = 'transform';
+        watch([isSticky, isScrollUp], ([_isSticky, _isScrollUp]) => {
+          let opacity: string | null = null;
+          let transform: string | null = null;
+          if (_isSticky && (!_isScrollUp || isShownOnScrollDown)) {
+            opacity = '0';
+            transform = 'translateY(-100%)';
+          }
+          header.value.style.opacity = opacity;
+          header.value.style.transform = transform;
+        });
+        watch(transition, (_transition) => {
+          header.value.style.transition = _transition;
+        });
+      }
+      if (canCreateHeightDiv) {
+        heightDiv = document.createElement('div');
+        header.value.parentElement.insertBefore(heightDiv, header.value);
+      }
+    });
+  }
+  return {
+    staticHeight,
+    staticY,
+    isSticky,
+    isScrollUp,
+    transition,
+  };
+};
+
+export default useStickyHeader;

package/packages/storefront/src/lib/layouts/BaseBody.astro

@@ -12,7 +12,9 @@ export interface Props {
 ---
 
 <body>
+  <div id="teleported-overlap" class="relative z-50"></div>
+  <div id="teleported-top" class="relative z-0"></div>
   <slot />
   <slot name="before-body-end" />
-  <div id="teleported"></div>
+  <div id="teleported-bottom" class="relative z-0"></div>
 </body>