@cimplify/cli 0.9.0 → 0.9.1

package/templates/storefront-services/components/mobile-nav.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import Link from "next/link";
 import { brand } from "@/lib/brand";
 
@@ -11,6 +12,9 @@ import { brand } from "@/lib/brand";
  */
 export function MobileNav() {
   const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
 
   useEffect(() => {
     if (!open) return;
@@ -53,61 +57,67 @@ export function MobileNav() {
         </svg>
       </button>
 
-      {open ? (
-        <div className="fixed inset-0 z-50 sm:hidden">
-          <button
-            type="button"
-            onClick={() => setOpen(false)}
-            aria-label="Close menu"
-            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
-          />
-          <nav
-            id="mobile-nav-drawer"
-            aria-label="Mobile navigation"
-            className="absolute inset-y-0 right-0 w-[85%] max-w-sm flex flex-col bg-background border-l border-border shadow-2xl"
-          >
-            <div className="flex items-center justify-between px-6 py-4 border-b border-border">
-              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-                Menu
-              </span>
+      {/* Portalled: the header carries `backdrop-filter`, which makes it the
+          containing block for `position: fixed`, clamping this drawer to the
+          header's box. */}
+      {open && mounted
+        ? createPortal(
+            <div className="fixed inset-0 z-50 sm:hidden">
               <button
                 type="button"
                 onClick={() => setOpen(false)}
                 aria-label="Close menu"
-                className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
+                className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+              />
+              <nav
+                id="mobile-nav-drawer"
+                aria-label="Mobile navigation"
+                className="absolute inset-y-0 right-0 w-[85%] max-w-sm flex flex-col bg-background border-l border-border shadow-2xl"
               >
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  aria-hidden="true"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            </div>
-            <ul className="flex flex-col gap-1 px-3 py-4">
-              {brand.header.nav.map((link) => (
-                <li key={link.href}>
-                  <Link
-                    href={link.href}
+                <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+                  <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                    Menu
+                  </span>
+                  <button
+                    type="button"
                     onClick={() => setOpen(false)}
-                    className="block px-3 py-3 rounded-md text-base font-medium text-foreground hover:bg-muted transition-colors"
+                    aria-label="Close menu"
+                    className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
                   >
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-      ) : null}
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                  </button>
+                </div>
+                <ul className="flex flex-col gap-1 px-3 py-4">
+                  {brand.header.nav.map((link) => (
+                    <li key={link.href}>
+                      <Link
+                        href={link.href}
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-3 rounded-md text-base font-medium text-foreground hover:bg-muted transition-colors"
+                      >
+                        {link.label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   );
 }

package/templates/storefront-services/package.json

@@ -17,7 +17,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.95.0",
+    "@cimplify/sdk": "^0.96.0",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"