x
This commit is contained in:
Your Name committed
1 parent
52a5217d9b
commit
752451b1d4
2 files changed
+210
-67
No files matched your search
@@ -1,7 +1,20 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import type { MegaMenuPayload } from '../store/menuStore';
|
||||
import type { MegaMenuPayload, MenuColumn } from '../store/menuStore';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ArrowRight,
|
||||
Award,
|
||||
Box,
|
||||
ChevronRight,
|
||||
Gift,
|
||||
Leaf,
|
||||
Package,
|
||||
ShoppingBag,
|
||||
Sparkles,
|
||||
Star,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface DesktopMegaMenuProps {
|
||||
items: MegaMenuPayload[];
|
||||
@@ -10,7 +23,28 @@ interface DesktopMegaMenuProps {
|
||||
const getLocalizedText = (textObj: Record<string, string> | string | undefined, lang: string) => {
|
||||
if (typeof textObj === 'string') return textObj;
|
||||
if (!textObj) return '';
|
||||
return textObj[lang] || textObj['en'] || Object.values(textObj)[0] || '';
|
||||
return textObj[lang] || textObj.en || textObj.th || Object.values(textObj)[0] || '';
|
||||
};
|
||||
|
||||
const MENU_ICONS: LucideIcon[] = [
|
||||
ShoppingBag,
|
||||
Sparkles,
|
||||
Leaf,
|
||||
Package,
|
||||
Gift,
|
||||
Award,
|
||||
];
|
||||
|
||||
const MAX_TOP_LEVEL_LINKS = 5;
|
||||
const MAX_INLINE_CHILD_LINKS = 3;
|
||||
|
||||
const getMoreLabel = (count: number, lang: string) => {
|
||||
if (lang === 'th') return `+ อีก ${count} รายการ`;
|
||||
if (lang === 'ja') return `+ 他${count}件`;
|
||||
if (lang === 'zh') return `+ 还有 ${count} 项`;
|
||||
if (lang === 'vi') return `+ ${count} mục khác`;
|
||||
if (lang === 'ko') return `+ ${count}개 더`;
|
||||
return `+ ${count} more`;
|
||||
};
|
||||
|
||||
// Image block shared between Root and Hover areas
|
||||
@@ -50,17 +84,37 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
|
||||
}, 150);
|
||||
};
|
||||
|
||||
const getFirstImageLink = (columns: MenuColumn[] = []) => {
|
||||
for (const column of columns) {
|
||||
const found = column.links.find((link) => link.imageUrl);
|
||||
if (found) return found;
|
||||
}
|
||||
return columns[0]?.links[0];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
|
||||
{items.map((item) => {
|
||||
const uniqueId = item.nodeId || item.id || `menu-${item.url}`;
|
||||
{items.map((item, index) => {
|
||||
const uniqueId = item.nodeId || item.id || `menu-${item.url || index}`;
|
||||
const isOpen = openId === uniqueId;
|
||||
const hasColumns = item.columns && item.columns.length > 0;
|
||||
|
||||
// Determine if any column has an icon OR any link has an image
|
||||
const hasAnyColumnIcon = item.columns?.some(col => !!col.iconUrl);
|
||||
const hasAnyLinkImage = item.columns?.some(col => col.links.some(l => !!l.imageUrl));
|
||||
const showRightPanel = item.rootImageUrl || hasAnyLinkImage;
|
||||
const visibleColumns = item.columns?.slice(0, 2) ?? [];
|
||||
const featuredLink = getFirstImageLink(item.columns);
|
||||
const featuredConfig = item.featured;
|
||||
const showFeatured = featuredConfig?.enabled !== false;
|
||||
const configuredImage = featuredConfig?.imageUrl || null;
|
||||
const featuredImage = hoveredLinkImage ?? configuredImage ?? featuredLink?.imageUrl ?? item.rootImageUrl;
|
||||
const featuredHeading = getLocalizedText(featuredConfig?.sectionTitle, lang) || 'Featured';
|
||||
const featuredBadge = getLocalizedText(featuredConfig?.badge, lang) || 'Recommended';
|
||||
const featuredTitle = getLocalizedText(featuredConfig?.title, lang)
|
||||
|| getLocalizedText(featuredLink?.label, lang)
|
||||
|| getLocalizedText(item.label, lang);
|
||||
const featuredSubtitle = getLocalizedText(featuredConfig?.subtitle, lang) || (item.columns?.[0]
|
||||
? getLocalizedText(item.columns[0].title, lang)
|
||||
: getLocalizedText(item.label, lang));
|
||||
const featuredHref = featuredConfig?.url || featuredLink?.url || item.url || '#';
|
||||
const featuredCta = getLocalizedText(featuredConfig?.ctaLabel, lang) || 'View details';
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -91,76 +145,152 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Dropdown panel — fixed, full-width */}
|
||||
{hasColumns && (
|
||||
<div
|
||||
className={`fixed left-0 right-0 z-50 transition-opacity duration-200 ${
|
||||
isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
|
||||
className={`fixed left-1/2 z-50 w-[min(100vw-2rem,980px)] -translate-x-1/2 transition-all duration-200 ${
|
||||
isOpen ? 'opacity-100 pointer-events-auto translate-y-0' : 'opacity-0 pointer-events-none -translate-y-1'
|
||||
}`}
|
||||
style={{ top: 'var(--navbar-bottom, 56px)' }}
|
||||
onMouseEnter={() => handleOpen(uniqueId)}
|
||||
onMouseLeave={handleClose}
|
||||
>
|
||||
<div className="w-full bg-pop-bg border-b border-pop-black/10 shadow-sm cursor-default">
|
||||
<div className="flex items-start gap-10 py-10 max-w-7xl mx-auto px-6">
|
||||
<div className="mx-auto h-3 w-20 overflow-hidden">
|
||||
<div className="mx-auto mt-2 h-5 w-5 rotate-45 rounded-sm border-l border-t border-pop-black/10 bg-pop-bg/95" />
|
||||
</div>
|
||||
<div className="w-full overflow-hidden rounded-lg border border-pop-black/10 bg-pop-bg/95 shadow-2xl cursor-default backdrop-blur-xl">
|
||||
<div className={`grid gap-0 px-8 py-8 ${showFeatured ? 'grid-cols-[1fr_1fr_270px]' : 'grid-cols-2'}`}>
|
||||
{visibleColumns.map((col, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`pr-8 text-left ${idx > 0 ? 'border-l border-pop-black/10 pl-8' : ''}`}
|
||||
>
|
||||
<h4 className="mb-5 flex items-center gap-3 text-xs font-bold normal-case tracking-normal text-pop-black">
|
||||
{(() => {
|
||||
const HeadingIcon = MENU_ICONS[idx] ?? Sparkles;
|
||||
return <HeadingIcon className="h-4 w-4 text-pop-black/70" strokeWidth={1.5} />;
|
||||
})()}
|
||||
{getLocalizedText(col.title, lang)}
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
{col.links.slice(0, MAX_TOP_LEVEL_LINKS).map((link, lIdx) => {
|
||||
const RowIcon = MENU_ICONS[(idx * 3 + lIdx + 1) % MENU_ICONS.length] ?? Box;
|
||||
const hasNestedLinks = !!link.links?.length;
|
||||
const visibleChildLinks = link.links?.slice(0, MAX_INLINE_CHILD_LINKS) ?? [];
|
||||
const hiddenChildCount = Math.max((link.links?.length ?? 0) - MAX_INLINE_CHILD_LINKS, 0);
|
||||
const moreChildHref = link.url || link.links?.[MAX_INLINE_CHILD_LINKS]?.url || link.links?.[0]?.url || '#';
|
||||
|
||||
{/* LEFT: Root menu image (1:1) — hidden on smaller screens */}
|
||||
{item.rootImageUrl && (
|
||||
<div className="w-56 h-56 shrink-0 rounded-xl overflow-hidden border border-pop-black/8 hidden lg:block">
|
||||
<MenuImage src={item.rootImageUrl} alt={getLocalizedText(item.label, lang)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CENTER: Columns */}
|
||||
<div className="flex gap-12 flex-1">
|
||||
{item.columns!.map((col, idx) => (
|
||||
<div key={idx} className="flex gap-4 min-w-[160px] text-left items-start">
|
||||
|
||||
{/* Column icon (1:1) — shown only if this column has an iconUrl */}
|
||||
{(hasAnyColumnIcon) && (
|
||||
<div className="w-14 h-14 shrink-0 rounded-lg overflow-hidden bg-pop-black/5 border border-pop-black/8 mt-0.5">
|
||||
<MenuImage
|
||||
src={col.iconUrl}
|
||||
alt={getLocalizedText(col.title, lang)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title and links */}
|
||||
<div className="flex flex-col">
|
||||
<h4 className="text-[10px] uppercase tracking-widest text-pop-black/60 font-bold mb-3">
|
||||
{getLocalizedText(col.title, lang)}
|
||||
</h4>
|
||||
<ul className="space-y-2.5">
|
||||
{col.links.map((link, lIdx) => (
|
||||
<li key={lIdx}>
|
||||
return (
|
||||
<li key={lIdx}>
|
||||
<div
|
||||
className="rounded-md"
|
||||
onMouseEnter={() => setHoveredLinkImage(link.imageUrl || null)}
|
||||
onMouseLeave={() => setHoveredLinkImage(null)}
|
||||
>
|
||||
<Link
|
||||
to={link.url || '#'}
|
||||
className="text-sm font-normal normal-case tracking-normal text-pop-black/75 hover:text-pop-black block transition-colors duration-150"
|
||||
onMouseEnter={() => setHoveredLinkImage(link.imageUrl || null)}
|
||||
onMouseLeave={() => setHoveredLinkImage(null)}
|
||||
to={link.url || link.links?.[0]?.url || '#'}
|
||||
className="group flex items-center gap-4 rounded-md px-1 py-2.5 text-left transition-colors hover:bg-pop-black/5"
|
||||
>
|
||||
{getLocalizedText(link.label, lang)}
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-pop-black/10 bg-pop-bg text-pop-black/70 transition-colors group-hover:border-pop-black/30">
|
||||
<RowIcon className="h-5 w-5" strokeWidth={1.35} />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-sm font-bold normal-case tracking-normal text-pop-black">
|
||||
{getLocalizedText(link.label, lang)}
|
||||
</span>
|
||||
<span className="mt-0.5 block truncate text-xs font-normal normal-case tracking-normal text-pop-black/55">
|
||||
{getLocalizedText(col.title, lang)}
|
||||
</span>
|
||||
</span>
|
||||
<ChevronRight className="h-4 w-4 shrink-0 text-pop-black/40 transition-colors group-hover:text-pop-black" />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Hover preview image (1:1) — shown only if any link has an imageUrl */}
|
||||
{showRightPanel && (
|
||||
<div className="w-56 h-56 shrink-0 rounded-xl overflow-hidden border border-pop-black/8 bg-pop-black/5 hidden lg:flex items-center justify-center">
|
||||
<MenuImage
|
||||
src={hoveredLinkImage ?? item.rootImageUrl}
|
||||
alt="Preview"
|
||||
placeholder="Hover a link to preview"
|
||||
/>
|
||||
{hasNestedLinks && (
|
||||
<ul className="ml-[3.25rem] mt-1 space-y-1 border-l border-pop-black/10 pl-3">
|
||||
{visibleChildLinks.map((childLink, childIndex) => (
|
||||
<li key={childIndex}>
|
||||
<Link
|
||||
to={childLink.url || '#'}
|
||||
className="block rounded-sm px-2 py-1.5 text-xs font-normal normal-case tracking-normal text-pop-black/60 transition-colors hover:bg-pop-black/5 hover:text-pop-black"
|
||||
onMouseEnter={() => setHoveredLinkImage(childLink.imageUrl || link.imageUrl || null)}
|
||||
>
|
||||
{getLocalizedText(childLink.label, lang)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
{hiddenChildCount > 0 && (
|
||||
<li>
|
||||
<Link
|
||||
to={moreChildHref}
|
||||
className="block rounded-sm px-2 py-1.5 text-xs font-semibold normal-case tracking-normal text-pop-black transition-colors hover:bg-pop-black/5"
|
||||
>
|
||||
{getMoreLabel(hiddenChildCount, lang)}
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<Link
|
||||
to={item.url || '#'}
|
||||
className="mt-7 flex items-center justify-between text-xs font-medium normal-case tracking-normal text-pop-black/60 transition-colors hover:text-pop-black"
|
||||
>
|
||||
<span>{getLocalizedText(item.label, lang)}</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{showFeatured && (
|
||||
<div className="border-l border-pop-black/10 pl-8">
|
||||
<h4 className="mb-5 flex items-center gap-3 text-xs font-bold normal-case tracking-normal text-pop-black">
|
||||
<Star className="h-4 w-4 text-pop-black/70" strokeWidth={1.5} />
|
||||
{featuredHeading}
|
||||
</h4>
|
||||
<Link
|
||||
to={featuredHref}
|
||||
className="group block overflow-hidden rounded-lg border border-pop-black/10 bg-pop-black/5 transition-colors hover:border-pop-black/30"
|
||||
onMouseEnter={() => setHoveredLinkImage(configuredImage ?? featuredLink?.imageUrl ?? null)}
|
||||
onMouseLeave={() => setHoveredLinkImage(null)}
|
||||
>
|
||||
<div className="relative h-40 w-full overflow-hidden bg-pop-black/5">
|
||||
<MenuImage
|
||||
src={featuredImage}
|
||||
alt={featuredTitle}
|
||||
placeholder={getLocalizedText(item.label, lang)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 p-4">
|
||||
{featuredBadge && (
|
||||
<span className="inline-flex rounded-full bg-pop-bg px-2.5 py-1 text-[10px] font-bold normal-case tracking-normal text-pop-black/70">
|
||||
{featuredBadge}
|
||||
</span>
|
||||
)}
|
||||
<div>
|
||||
<p className="line-clamp-2 text-sm font-bold normal-case tracking-normal text-pop-black">
|
||||
{featuredTitle}
|
||||
</p>
|
||||
{featuredSubtitle && (
|
||||
<p className="mt-1 line-clamp-1 text-xs font-normal normal-case tracking-normal text-pop-black/55">
|
||||
{featuredSubtitle}
|
||||
</p>
|
||||
)}
|
||||
{featuredConfig?.price && (
|
||||
<p className="mt-2 text-sm font-bold normal-case tracking-normal text-pop-black">
|
||||
{featuredConfig.price}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="flex w-full items-center justify-center rounded-full border border-pop-black/20 px-4 py-2 text-xs font-bold normal-case tracking-normal text-pop-black transition-colors group-hover:bg-pop-black group-hover:text-pop-bg">
|
||||
{featuredCta}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,25 +2,38 @@ import { create } from 'zustand';
|
||||
import { API_BASE } from '@homaroma/types';
|
||||
|
||||
export interface MenuLink {
|
||||
label: Record<string, string>;
|
||||
label: Record<string, string> | string;
|
||||
url?: string;
|
||||
links?: MenuLink[];
|
||||
imageUrl?: string | null; // รูปที่แสดงเมื่อ Hover ลิงก์
|
||||
}
|
||||
|
||||
export interface MenuColumn {
|
||||
title: Record<string, string>;
|
||||
title: Record<string, string> | string;
|
||||
links: MenuLink[];
|
||||
iconUrl?: string | null; // รูปประจำคอลัมน์ (1:1)
|
||||
}
|
||||
|
||||
export interface MenuFeaturedCard {
|
||||
enabled?: boolean;
|
||||
sectionTitle?: Record<string, string> | string;
|
||||
badge?: Record<string, string> | string;
|
||||
title?: Record<string, string> | string;
|
||||
subtitle?: Record<string, string> | string;
|
||||
price?: string;
|
||||
imageUrl?: string | null;
|
||||
url?: string;
|
||||
ctaLabel?: Record<string, string> | string;
|
||||
}
|
||||
|
||||
export interface MegaMenuPayload {
|
||||
id?: string;
|
||||
nodeId?: string;
|
||||
label: Record<string, string>;
|
||||
label: Record<string, string> | string;
|
||||
url?: string;
|
||||
columns?: MenuColumn[];
|
||||
rootImageUrl?: string | null; // รูปหลักฝั่งซ้ายสุด (1:1)
|
||||
featured?: MenuFeaturedCard;
|
||||
}
|
||||
|
||||
interface MenuState {
|
||||
|
||||
Reference in new issue
Block a user