feat(ecommerce): mega-menu de Departamentos multi-columna en el navbar

Reemplaza la fila horizontal de pildoras por categoria (ADR 0005 seccion
3, patron Walmart) por un trigger unico "Departamentos" que abre un
panel multi-columna con las 6 categorias raiz y sus hijos, activado por
hover (mouse) o tap (touch), con cierre por click-fuera y Escape.

workloads/ecommerce/app/layout.tsx

@@ -6,6 +6,13 @@ import { Navbar } from "@/components/layout/navbar";
 import { WishlistDrawer } from "@/components/wishlist/wishlist-drawer";
 import { getCategories, getProducts } from "@/lib/headless/client";
 
+// El Navbar (categorias/colecciones/predictive search) vive en este layout
+// compartido -- si alguna pagina futura queda estatica, este fetch se
+// congelaria con datos de build time (mock) igual que le paso al home
+// (ver app/page.tsx). Forzarlo aca protege el nav en cualquier ruta, no
+// solo en las que hoy ya son dinamicas por otro motivo (searchParams, etc.).
+export const dynamic = "force-dynamic";
+
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://shop.cruzcloud.net"),
   title: { default: "ARI Shopping | Juguetes, regalos y variedades", template: "%s | ARI Shopping" },

workloads/ecommerce/app/page.tsx

@@ -7,6 +7,13 @@ import { ProductCarousel } from "@/components/product/product-carousel";
 import { Button } from "@/components/ui/button";
 import { getCategories, getProducts } from "@/lib/headless/client";
 
+// Sin esto, Next.js prerenderiza "/" en build time dentro del Dockerfile,
+// donde HEADLESS_PROVIDER/MEDUSA_* todavia no existen (solo se inyectan en
+// runtime via el Deployment) -- cae al provider mock y ese HTML queda
+// cacheado 1 año (visto en vivo: x-nextjs-prerender:1, s-maxage=31536000),
+// violando el flujo Admin -> revalidate del ADR 0005 justo en el home.
+export const dynamic = "force-dynamic";
+
 export default async function HomePage() {
   const [products, categories] = await Promise.all([getProducts(), getCategories()]);
   const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);

workloads/ecommerce/components/home/category-tiles.tsx

@@ -3,11 +3,13 @@ import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 import type { Category } from "@/lib/headless/types";
 
+type TileContent = { subtitle: string; image?: string; color: string };
+
 // No hay fotografia real todavia para las 6 categorias raiz de la taxonomia
 // (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen
 // un asset en public/images/categories/. Las demas caen al tile de solo
 // gradiente en vez de mostrar una imagen que no les corresponde.
-const tileContent: Record<string, { subtitle: string; image?: string; color: string }> = {
+const tileContent: Record<string, TileContent> = {
   juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "from-yellow-300 to-orange-400" },
   "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "from-cyan-400 to-blue-500" },
   "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "from-pink-300 to-fuchsia-400" },
@@ -16,7 +18,7 @@ const tileContent: Record<string, { subtitle: string; image?: string; color: str
   variedades: { subtitle: "Un poco de todo", color: "from-violet-400 to-purple-600" },
 };
 
-const defaultTile = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };
+const defaultTile: TileContent = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };
 
 export function CategoryTiles({ categories }: { categories: Category[] }) {
   const roots = categories.filter((category) => !category.parentId);

workloads/ecommerce/components/layout/navbar.tsx

@@ -3,8 +3,8 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
-import { ChevronDown, Heart, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
-import { Suspense, useMemo, useState } from "react";
+import { ChevronDown, Heart, LayoutGrid, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { PredictiveSearch } from "@/components/search/predictive-search";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
@@ -151,94 +151,120 @@ function mobileLinkClass(active: boolean): string {
 
 function DesktopCategoryNavigation({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
   const { isActive, isAllActive } = useCategoryNavigationState();
+  return <CategoryNavBar tree={tree} onOpenMenu={onOpenMenu} isActive={isActive} isAllActive={isAllActive} />;
+}
 
+function DesktopCategoryNavigationFallback({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
+  return <CategoryNavBar tree={tree} onOpenMenu={onOpenMenu} isActive={() => false} isAllActive={false} />;
+}
+
+function CategoryNavBar({
+  tree,
+  onOpenMenu,
+  isActive,
+  isAllActive,
+}: {
+  tree: CategoryNode[];
+  onOpenMenu: () => void;
+  isActive: (name: string) => boolean;
+  isAllActive: boolean;
+}) {
   return (
     <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
-      <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
+      <div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
         <Button
           variant="ghost"
           size="icon"
           onClick={onOpenMenu}
           aria-label="Abrir menú principal"
-          className="mr-3 shrink-0 text-white hover:bg-white/10"
+          className="mr-2 shrink-0 text-white hover:bg-white/10"
         >
           <Menu />
         </Button>
 
+        <DepartmentsMegaMenu tree={tree} isActive={isActive} />
+
         <Link href="/catalog" prefetch={false} aria-current={isAllActive ? "page" : undefined} className={pillClass(isAllActive)}>
           Todo
         </Link>
-
-        {tree.map((root) =>
-          root.children.length > 0 ? (
-            <div key={root.id} className="group relative shrink-0">
-              <Link
-                href={`/catalog?category=${encodeURIComponent(root.name)}`}
-                prefetch={false}
-                aria-current={isActive(root.name) ? "page" : undefined}
-                className={`flex items-center gap-1 ${pillClass(isActive(root.name))}`}
-              >
-                {root.name}
-                <ChevronDown className="size-3.5 opacity-70" />
-              </Link>
-              <div className="invisible absolute left-0 top-full z-50 min-w-56 -translate-y-1 rounded-2xl border border-slate-800 bg-slate-950 p-2 opacity-0 shadow-2xl transition group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
-                {root.children.map((child) => (
-                  <Link
-                    key={child.id}
-                    href={`/catalog?category=${encodeURIComponent(child.name)}`}
-                    prefetch={false}
-                    aria-current={isActive(child.name) ? "page" : undefined}
-                    className={`block rounded-xl px-3 py-2 text-sm font-bold transition ${
-                      isActive(child.name) ? "bg-violet-600 text-white" : "text-white/85 hover:bg-white/10"
-                    }`}
-                  >
-                    {child.name}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          ) : (
-            <Link
-              key={root.id}
-              href={`/catalog?category=${encodeURIComponent(root.name)}`}
-              prefetch={false}
-              aria-current={isActive(root.name) ? "page" : undefined}
-              className={pillClass(isActive(root.name))}
-            >
-              {root.name}
-            </Link>
-          ),
-        )}
       </div>
     </nav>
   );
 }
 
-function DesktopCategoryNavigationFallback({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
+function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActive: (name: string) => boolean }) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(event: PointerEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) setOpen(false);
+    }
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
   return (
-    <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
-      <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onOpenMenu}
-          aria-label="Abrir menú principal"
-          className="mr-3 shrink-0 text-white hover:bg-white/10"
-        >
-          <Menu />
-        </Button>
+    <div ref={containerRef} className="relative shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-expanded={open}
+        aria-haspopup="true"
+        className={`flex items-center gap-1.5 ${pillClass(open)}`}
+      >
+        <LayoutGrid className="size-4" />
+        Departamentos
+        <ChevronDown className={`size-3.5 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
 
-        <Link href="/catalog" prefetch={false} className={pillClass(false)}>
-          Todo
-        </Link>
-
-        {tree.map((root) => (
-          <Link key={root.id} href={`/catalog?category=${encodeURIComponent(root.name)}`} prefetch={false} className={pillClass(false)}>
-            {root.name}
-          </Link>
-        ))}
-      </div>
-    </nav>
+      {open && (
+        <div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
+            {tree.map((root) => (
+              <div key={root.id}>
+                <Link
+                  href={`/catalog?category=${encodeURIComponent(root.name)}`}
+                  prefetch={false}
+                  aria-current={isActive(root.name) ? "page" : undefined}
+                  onClick={() => setOpen(false)}
+                  className={`block text-sm font-black uppercase tracking-wide transition ${
+                    isActive(root.name) ? "text-fuchsia-400" : "text-white hover:text-fuchsia-400"
+                  }`}
+                >
+                  {root.name}
+                </Link>
+                {root.children.length > 0 && (
+                  <ul className="mt-2.5 grid gap-1.5">
+                    {root.children.map((child) => (
+                      <li key={child.id}>
+                        <Link
+                          href={`/catalog?category=${encodeURIComponent(child.name)}`}
+                          prefetch={false}
+                          aria-current={isActive(child.name) ? "page" : undefined}
+                          onClick={() => setOpen(false)}
+                          className={`block text-sm transition ${isActive(child.name) ? "font-bold text-violet-300" : "text-white/70 hover:text-white"}`}
+                        >
+                          {child.name}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
   );
 }
 

workloads/ecommerce/frontend/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.135
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.143
           env:
             - name: HEADLESS_PROVIDER
               value: medusa