fix(ecommerce): mega-menu de Departamentos multi-columna en el navbar #36
@@ -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"
|
||||
<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)}`}
|
||||
>
|
||||
<Menu />
|
||||
</Button>
|
||||
|
||||
<Link href="/catalog" prefetch={false} className={pillClass(false)}>
|
||||
Todo
|
||||
</Link>
|
||||
<LayoutGrid className="size-4" />
|
||||
Departamentos
|
||||
<ChevronDown className={`size-3.5 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
|
||||
{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) => (
|
||||
<Link key={root.id} href={`/catalog?category=${encodeURIComponent(root.name)}`} prefetch={false} className={pillClass(false)}>
|
||||
<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>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user