Add workloads/ecommerce/src/components/navigation/CategoryMenu.tsx

workloads/ecommerce/src/components/navigation/CategoryMenu.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import styles from "./CategoryMenu.module.css";
+
+type MenuItem = {
+  label: string;
+  href: string;
+};
+
+/**
+ * Menú principal ARI Shopping.
+ *
+ * Hotfix de estabilidad:
+ * Se utilizan enlaces HTML nativos para que cada cambio de categoría
+ * realice una navegación completa. Esto evita conservar estados obsoletos
+ * del catálogo cuando únicamente cambia el query string.
+ */
+const MENU_ITEMS: readonly MenuItem[] = [
+  {
+    label: "Juguetes para bebés",
+    href: "/catalog?category=Figuras",
+  },
+  {
+    label: "Educativos",
+    href: "/catalog?category=Figuras&section=educativos",
+  },
+  {
+    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",
+  },
+];
+
+function normalizeUrl(pathname: string, query: string): string {
+  return query ? `${pathname}?${query}` : pathname;
+}
+
+export default function CategoryMenu() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const currentUrl = normalizeUrl(pathname, searchParams.toString());
+
+  return (
+    <nav className={styles.navigation} aria-label="Categorías principales">
+      <a
+        className={styles.menuButton}
+        href="/catalog"
+        aria-label="Abrir catálogo"
+        title="Abrir catálogo"
+      >
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+      </a>
+
+      <div className={styles.links}>
+        {MENU_ITEMS.map((item) => {
+          const active = currentUrl === item.href;
+
+          return (
+            <a
+              key={`${item.label}:${item.href}`}
+              href={item.href}
+              className={`${styles.link}${active ? ` ${styles.active}` : ""}`}
+              aria-current={active ? "page" : undefined}
+              data-navigation-mode="document"
+            >
+              {item.label}
+            </a>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}