246 lines
9.6 KiB
TypeScript
246 lines
9.6 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import Link from '../LocalizedLink'
|
|
import { ChevronLeft, ChevronRight, Globe, X } from 'lucide-react'
|
|
import type { MegaMenuPayload, MenuColumn, MenuLink } from './menuTypes'
|
|
import { getLocalizedMenuText } from './menuTypes'
|
|
|
|
type MenuNode =
|
|
| { type: 'root'; data: MegaMenuPayload[]; title: string | Record<string, string> }
|
|
| { type: 'mega'; data: MenuColumn[]; title: string | Record<string, string> }
|
|
| { type: 'links'; data: MenuLink[]; title: string | Record<string, string> }
|
|
|
|
interface MobileDrawerProps {
|
|
isOpen: boolean
|
|
items: MegaMenuPayload[]
|
|
lang: string
|
|
customerName?: string | null
|
|
onClose: () => void
|
|
onOpenLang: () => void
|
|
onLogin: () => void
|
|
onLogout: () => void
|
|
}
|
|
|
|
export function MobileDrawer({
|
|
isOpen,
|
|
items,
|
|
lang,
|
|
customerName,
|
|
onClose,
|
|
onOpenLang,
|
|
onLogin,
|
|
onLogout,
|
|
}: MobileDrawerProps) {
|
|
const [stack, setStack] = useState<MenuNode[]>([{ type: 'root', data: items, title: 'Menu' }])
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
const timer = setTimeout(() => {
|
|
setStack([{ type: 'root', data: items, title: 'Menu' }])
|
|
}, 300)
|
|
return () => clearTimeout(timer)
|
|
}
|
|
|
|
const timer = setTimeout(() => {
|
|
setStack((current) => {
|
|
if (current.length === 1 && current[0].data !== items) {
|
|
return [{ type: 'root', data: items, title: 'Menu' }]
|
|
}
|
|
return current
|
|
})
|
|
}, 0)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [isOpen, items])
|
|
|
|
const pushView = (node: MenuNode) => setStack((prev) => [...prev, node])
|
|
const popView = () => setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev))
|
|
|
|
const linkClass = 'ui-menu-link py-4'
|
|
const nestedLinkClass = 'ui-menu-link-compact py-2'
|
|
|
|
const renderView = (view: MenuNode) => {
|
|
if (view.type === 'root') {
|
|
return (
|
|
<div className="space-y-1 px-6 py-2">
|
|
{view.data.map((item, index) => (
|
|
<div key={item.id || item.nodeId || `menu-root-${index}`} className="border-b border-text-main/10 last:border-0">
|
|
{item.columns?.length ? (
|
|
<button
|
|
onClick={() => pushView({ type: 'mega', data: item.columns!, title: item.label })}
|
|
className="group flex w-full items-center justify-between py-4 text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary"
|
|
>
|
|
<span>{getLocalizedMenuText(item.label, lang)}</span>
|
|
<ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
|
|
</button>
|
|
) : (
|
|
<Link href={item.url || '#'} onClick={onClose} className={linkClass}>
|
|
{getLocalizedMenuText(item.label, lang)}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
))}
|
|
{customerName && (
|
|
<div className="border-b border-text-main/10">
|
|
<Link href="/profile" onClick={onClose} className={linkClass}>
|
|
My Profile
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (view.type === 'mega') {
|
|
return (
|
|
<div className="px-6 py-4">
|
|
{view.data.map((column, columnIndex) => (
|
|
<div key={columnIndex} className="mb-8 last:mb-0">
|
|
<h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-text-main/45">
|
|
{getLocalizedMenuText(column.title, lang)}
|
|
</h4>
|
|
<div className="space-y-2">
|
|
{column.links.map((link, linkIndex) => (
|
|
<div key={linkIndex}>
|
|
{link.links?.length ? (
|
|
<button
|
|
onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
|
|
className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
|
|
>
|
|
<span>{getLocalizedMenuText(link.label, lang)}</span>
|
|
<ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
|
|
</button>
|
|
) : (
|
|
<Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
|
|
{getLocalizedMenuText(link.label, lang)}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2 px-6 py-4">
|
|
{view.data.map((link, linkIndex) => (
|
|
<div key={linkIndex}>
|
|
{link.links?.length ? (
|
|
<button
|
|
onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
|
|
className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
|
|
>
|
|
<span>{getLocalizedMenuText(link.label, lang)}</span>
|
|
<ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
|
|
</button>
|
|
) : (
|
|
<Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
|
|
{getLocalizedMenuText(link.label, lang)}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`fixed inset-0 z-[60] transition-all duration-300 md:hidden ${isOpen ? 'visible' : 'invisible'}`}>
|
|
<div
|
|
className={`absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
|
|
onClick={onClose}
|
|
/>
|
|
<div
|
|
className={`absolute right-0 top-0 flex h-full w-80 max-w-[85vw] flex-col bg-surface-card shadow-2xl transition-transform duration-300 ${
|
|
isOpen ? 'translate-x-0' : 'translate-x-full'
|
|
}`}
|
|
>
|
|
<div className="z-10 flex shrink-0 items-center justify-between border-b border-text-main/10 bg-surface-card px-6 py-5">
|
|
<span className="text-sm font-bold uppercase tracking-widest text-text-main">Menu</span>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={onOpenLang}
|
|
className="flex shrink-0 items-center gap-1 rounded-md border border-brand-primary/30 bg-surface-page px-2.5 py-1 text-[10px] font-bold uppercase text-brand-primary"
|
|
>
|
|
<Globe className="h-3 w-3" />
|
|
{lang.toUpperCase()}
|
|
</button>
|
|
<button onClick={onClose} className="rounded-full p-1.5 text-text-main/65 transition hover:bg-surface-page hover:text-brand-primary">
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative flex-1 overflow-hidden bg-surface-card">
|
|
{stack.map((view, index) => {
|
|
const isCurrent = index === stack.length - 1
|
|
const isPast = index < stack.length - 1
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`absolute inset-0 flex flex-col bg-surface-card transition-transform duration-300 ease-in-out ${
|
|
isCurrent ? 'translate-x-0' : isPast ? '-translate-x-full' : 'translate-x-full'
|
|
}`}
|
|
>
|
|
{index > 0 && (
|
|
<button
|
|
onClick={popView}
|
|
className="flex shrink-0 items-center border-b border-text-main/5 px-6 py-4 text-xs font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page"
|
|
>
|
|
<ChevronLeft className="mr-2 h-4 w-4" />
|
|
Back to {getLocalizedMenuText(stack[index - 1].title, lang)}
|
|
</button>
|
|
)}
|
|
|
|
{index > 0 && (
|
|
<div className="shrink-0 px-6 py-5">
|
|
<h3 className="text-lg font-bold uppercase tracking-widest text-text-main">{getLocalizedMenuText(view.title, lang)}</h3>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 overflow-y-auto pb-6">{renderView(view)}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="z-10 shrink-0 space-y-3 border-t border-text-main/10 bg-surface-card px-6 pb-8 pt-6">
|
|
<Link
|
|
href="/shop"
|
|
onClick={onClose}
|
|
className="block w-full rounded-xl bg-text-main py-3.5 text-center text-xs font-bold uppercase tracking-widest text-surface-card shadow-sm transition-colors hover:bg-brand-primary"
|
|
>
|
|
Shop Now
|
|
</Link>
|
|
{customerName ? (
|
|
<button
|
|
onClick={() => {
|
|
onLogout()
|
|
onClose()
|
|
}}
|
|
className="block w-full rounded-xl border border-rose-500/20 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-rose-500 transition-colors hover:bg-rose-50"
|
|
>
|
|
Logout
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => {
|
|
onLogin()
|
|
onClose()
|
|
}}
|
|
className="block w-full rounded-xl border border-line-primary/50 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-line-primary transition-colors hover:bg-line-primary/10"
|
|
>
|
|
Login with LINE
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|