meshkee-websites/brb-store
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add category detail URLs and polish mega menu UX.

Browse Source 
Route categories to /products/category/{id}/{slug}, improve menu hover/layout, and hide stock/category clutter on product cards.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-23 00:34:23 +03:30
co-authored by Cursor
parent 5d53cf91eb
commit f078cdad0e
11 changed files with 375 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/Header.tsx
+28 -13
View File
@@ -32,17 +32,17 @@ export function Header({ categories = [] }: { categories?: NavCategory[] }) {
<Placeholder src={site.logo} alt={site.name} className="h-14 w-auto object-contain" />
</Link>
<nav className="mx-2 hidden items-center lg:flex">
<Link href="/" className="px-3 py-2 text-[14px] hover:text-brand">
<nav className="mx-2 hidden h-14 items-center lg:flex">
<Link href="/" className="inline-flex h-full items-center px-3 text-[14px] hover:text-brand">
خانه
</Link>
<div
className="relative"
className="relative flex h-full items-center"
onMouseEnter={() => setMegaOpen(true)}
onMouseLeave={() => setMegaOpen(false)}
>
<Link href="/products" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
<Link href="/products" className="inline-flex h-full items-center gap-1 px-3 text-[14px] hover:text-brand">
محصولات
<ChevronDown className="size-3.5" />
</Link>
@@ -52,7 +52,11 @@ export function Header({ categories = [] }: { categories?: NavCategory[] }) {
{navLinks
.filter((link) => link.href !== "/" && link.href !== "/products")
.map((link) => (
<Link key={link.href} href={link.href} className="px-3 py-2 text-[14px] hover:text-brand">
<Link
key={link.href}
href={link.href}
className="inline-flex h-full items-center px-3 text-[14px] hover:text-brand"
>
{link.label}
</Link>
))}
@@ -107,14 +111,25 @@ export function Header({ categories = [] }: { categories?: NavCategory[] }) {
{category.title}
</Link>
{category.children.map((child) => (
<Link
key={child.id}
href={child.href}
className="block py-1 text-[12px] text-muted"
onClick={() => setOpen(false)}
>
{child.title}
</Link>
<div key={child.id} className="ps-2">
<Link
href={child.href}
className="block py-1 text-[12px] font-medium text-ink"
onClick={() => setOpen(false)}
>
{child.title}
</Link>
{child.children.map((leaf) => (
<Link
key={leaf.id}
href={leaf.href}
className="block py-1 ps-3 text-[12px] text-muted"
onClick={() => setOpen(false)}
>
{leaf.title}
</Link>
))}
</div>
))}
</div>
))
components/layout/MegaMenu.tsx
+45 -33
View File
@@ -1,44 +1,56 @@
"use client";
import Link from "next/link";
import { Placeholder } from "@/components/Placeholder";
import type { NavCategory } from "@/lib/categories";
import { toMegaSections, type NavCategory } from "@/lib/categories";
function CategoryLinks({ items, depth = 0 }: { items: NavCategory[]; depth?: number }) {
if (!items.length) return null;
return (
<ul className={depth === 0 ? "space-y-1" : "mt-1 space-y-1 border-r border-line/70 pr-2 mr-1"}>
{items.map((item) => (
<li key={item.id}>
<Link
href={item.href}
className={`block rounded-lg px-2 py-1 transition hover:bg-paper hover:text-brand ${
depth === 0 ? "text-[12.5px] text-muted" : "text-[12px] text-muted/90"
}`}
>
{item.title}
</Link>
{item.children.length ? <CategoryLinks items={item.children} depth={depth + 1} /> : null}
</li>
))}
</ul>
);
}
export function MegaMenu({ open, categories }: { open: boolean; categories: NavCategory[] }) {
if (!open) return null;
const sections = toMegaSections(categories);
return (
<div className="absolute top-full right-0 z-50 mt-1 w-[min(920px,calc(100vw-2rem))] border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
{categories.length === 0 ? (
<p className="text-[13px] text-muted">دسته‌بندی‌ها به‌زودی اضافه می‌شوند.</p>
) : (
<div className="grid grid-cols-2 gap-5 md:grid-cols-3 lg:grid-cols-4">
{categories.map((category) => (
<div key={category.id}>
<Link href={category.href} className="mb-3 flex items-center gap-2 text-[13.5px] font-semibold text-ink hover:text-brand">
<span className="grid size-9 place-items-center overflow-hidden rounded-xl bg-paper">
<Placeholder src={category.image || "/placeholders/category.svg"} className="size-full object-cover" />
</span>
{category.title}
</Link>
{category.children.length ? (
<ul className="space-y-1.5 pr-1">
{category.children.map((child) => (
<li key={child.id}>
<Link
href={child.href}
className="block rounded-lg px-2 py-1 text-[12.5px] text-muted transition hover:bg-paper hover:text-brand"
>
{child.title}
</Link>
</li>
))}
</ul>
) : null}
</div>
))}
</div>
)}
<div className="absolute top-full right-0 z-50 -mt-1 pt-3">
<div className="max-h-[min(70vh,640px)] w-[min(920px,calc(100vw-2rem))] overflow-y-auto border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
{sections.length === 0 ? (
<p className="text-[13px] text-muted">دسته‌بندی‌ها به‌زودی اضافه می‌شوند.</p>
) : (
<div className="columns-2 gap-6 md:columns-3 lg:columns-4">
{sections.map((category) => (
<div key={category.id} className="mb-6 break-inside-avoid">
<Link
href={category.href}
className="mb-2 block text-[13.5px] font-semibold text-ink hover:text-brand"
>
{category.title}
</Link>
<CategoryLinks items={category.children} />
</div>
))}
</div>
)}
</div>
</div>
);
}