fix(frontend): synchronize catalog navigation with URL

workloads/ecommerce/components/layout/navbar.tsx

@@ -2,8 +2,9 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
 import { Heart, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
-import { useState } from "react";
+import { Suspense, useState } from "react";
 import { PredictiveSearch } from "@/components/search/predictive-search";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
@@ -12,13 +13,27 @@ import type { Product } from "@/lib/headless/types";
 import { useCartStore } from "@/store/cart-store";
 import { useWishlistStore } from "@/store/wishlist-store";
 
-const categories = [
-  { label: "Juguetes para bebés", href: "/catalog?category=Figuras" },
-  { label: "Educativos", href: "/catalog?category=Figuras" },
-  { label: "Muñecas y peluches", href: "/catalog?category=Peluches" },
-  { label: "Acción y aventura", href: "/catalog?collection=Marvel" },
-  { label: "Mochilas", href: "/catalog?category=Mochilas" },
-  { label: "Variedades", href: "/catalog" },
+type CategoryLink = {
+  label: string;
+  href: string;
+  category?: string;
+  collection?: string;
+  section?: string;
+  root?: boolean;
+};
+
+const categories: CategoryLink[] = [
+  { label: "Juguetes para bebés", href: "/catalog?category=Figuras", category: "Figuras" },
+  {
+    label: "Educativos",
+    href: "/catalog?category=Figuras&section=educativos",
+    category: "Figuras",
+    section: "educativos",
+  },
+  { label: "Muñecas y peluches", href: "/catalog?category=Peluches", category: "Peluches" },
+  { label: "Acción y aventura", href: "/catalog?collection=Marvel", collection: "Marvel" },
+  { label: "Mochilas", href: "/catalog?category=Mochilas", category: "Mochilas" },
+  { label: "Variedades", href: "/catalog", root: true },
 ];
 
 const collections = ["Toy Story", "Marvel", "Intensamente", "Lilo & Stitch", "Frozen"];
@@ -62,16 +77,9 @@ export function Navbar({ products }: { products: Product[] }) {
         </div>
       </div>
 
-      <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={() => setMenuOpen(true)} aria-label="Abrir menú principal" className="mr-3 shrink-0 text-white hover:bg-white/10"><Menu /></Button>
-          {categories.map((category) => (
-            <Link key={category.label} href={category.href} className="shrink-0 rounded-full px-4 py-2 text-sm font-extrabold text-white/90 transition hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white">
-              {category.label}
-            </Link>
-          ))}
-        </div>
-      </nav>
+      <Suspense fallback={<DesktopCategoryNavigationFallback onOpenMenu={() => setMenuOpen(true)} />}>
+        <DesktopCategoryNavigation onOpenMenu={() => setMenuOpen(true)} />
+      </Suspense>
 
       <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
         <SheetContent side="left" className="max-w-sm">
@@ -82,7 +90,9 @@ export function Navbar({ products }: { products: Product[] }) {
           <div className="flex-1 overflow-y-auto p-6">
             <p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-fuchsia-600">Categorías</p>
             <div className="grid gap-2">
-              {categories.map((category) => <Link key={category.label} href={category.href} onClick={() => setMenuOpen(false)} className="rounded-2xl border border-slate-200 px-4 py-3 font-extrabold hover:border-cyan-400 hover:bg-cyan-50">{category.label}</Link>)}
+              <Suspense fallback={<MobileCategoryLinksFallback onNavigate={() => setMenuOpen(false)} />}>
+                <MobileCategoryLinks onNavigate={() => setMenuOpen(false)} />
+              </Suspense>
             </div>
             <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
             <div className="flex flex-wrap gap-2">
@@ -112,3 +122,145 @@ export function Navbar({ products }: { products: Product[] }) {
     </header>
   );
 }
+
+function useCategoryNavigationState() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const currentCategory = searchParams.get("category") ?? "";
+  const currentCollection = searchParams.get("collection") ?? "";
+  const currentSection = searchParams.get("section") ?? "";
+  const isCatalog = pathname === "/catalog";
+
+  const isCategoryActive = (item: CategoryLink) => {
+    if (!isCatalog) return false;
+
+    if (item.root) {
+      return !currentCategory && !currentCollection && !currentSection;
+    }
+
+    return (
+      (item.category ?? "") === currentCategory &&
+      (item.collection ?? "") === currentCollection &&
+      (item.section ?? "") === currentSection
+    );
+  };
+
+  return { isCategoryActive };
+}
+
+function DesktopCategoryNavigation({ onOpenMenu }: { onOpenMenu: () => void }) {
+  const { isCategoryActive } = useCategoryNavigationState();
+
+  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>
+
+        {categories.map((category) => {
+          const active = isCategoryActive(category);
+
+          return (
+            <Link
+              key={category.label}
+              href={category.href}
+              prefetch={false}
+              aria-current={active ? "page" : undefined}
+              className={`shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
+                active
+                  ? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
+                  : "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
+              }`}
+            >
+              {category.label}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+
+function DesktopCategoryNavigationFallback({ onOpenMenu }: { onOpenMenu: () => void }) {
+  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>
+
+        {categories.map((category) => (
+          <Link
+            key={category.label}
+            href={category.href}
+            prefetch={false}
+            className="shrink-0 rounded-full px-4 py-2 text-sm font-extrabold text-white/90 transition hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
+          >
+            {category.label}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+function MobileCategoryLinks({ onNavigate }: { onNavigate: () => void }) {
+  const { isCategoryActive } = useCategoryNavigationState();
+
+  return (
+    <>
+      {categories.map((category) => {
+        const active = isCategoryActive(category);
+
+        return (
+          <Link
+            key={category.label}
+            href={category.href}
+            prefetch={false}
+            aria-current={active ? "page" : undefined}
+            onClick={onNavigate}
+            className={`rounded-2xl border px-4 py-3 font-extrabold transition ${
+              active
+                ? "border-violet-500 bg-violet-50 text-violet-700"
+                : "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
+            }`}
+          >
+            {category.label}
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+function MobileCategoryLinksFallback({ onNavigate }: { onNavigate: () => void }) {
+  return (
+    <>
+      {categories.map((category) => (
+        <Link
+          key={category.label}
+          href={category.href}
+          prefetch={false}
+          onClick={onNavigate}
+          className="rounded-2xl border border-slate-200 px-4 py-3 font-extrabold transition hover:border-cyan-400 hover:bg-cyan-50"
+        >
+          {category.label}
+        </Link>
+      ))}
+    </>
+  );
+}
+