fix page
This commit is contained in:
Your Name committed
1 parent
a7091858e0
commit
ba5c0aba50
9 files changed
+719
-431
No files matched your search
@@ -0,0 +1,254 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import type { MegaMenuPayload, MenuColumn, MenuLink } from '../store/menuStore';
|
||||
import { X, ChevronRight, ChevronLeft, Globe } from 'lucide-react';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { loginLiff, logoutLiff } from '../lib/liff';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface MobileDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
items: MegaMenuPayload[];
|
||||
onOpenLang: () => void;
|
||||
}
|
||||
|
||||
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] || '';
|
||||
};
|
||||
|
||||
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> };
|
||||
|
||||
export function MobileDrawer({ isOpen, onClose, items, onOpenLang }: MobileDrawerProps) {
|
||||
const { customer } = useAuthStore();
|
||||
const navigate = useNavigate();
|
||||
const { i18n } = useTranslation();
|
||||
const lang = i18n.language ? i18n.language.substring(0, 2) : 'en';
|
||||
|
||||
const [stack, setStack] = useState<MenuNode[]>([{ type: 'root', data: items, title: 'Menu' }]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setTimeout(() => {
|
||||
setStack([{ type: 'root', data: items, title: 'Menu' }]);
|
||||
}, 300);
|
||||
} else {
|
||||
if (stack.length === 1 && stack[0].data !== items) {
|
||||
setStack([{ type: 'root', data: items, title: 'Menu' }]);
|
||||
}
|
||||
}
|
||||
}, [isOpen, items]);
|
||||
|
||||
const handleLinkClick = (url: string) => {
|
||||
navigate(url);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const pushView = (node: MenuNode) => {
|
||||
setStack((prev) => [...prev, node]);
|
||||
};
|
||||
|
||||
const popView = () => {
|
||||
setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev));
|
||||
};
|
||||
|
||||
const renderView = (view: MenuNode) => {
|
||||
if (view.type === 'root') {
|
||||
return (
|
||||
<div className="px-6 py-2 space-y-1">
|
||||
{view.data.map((item) => (
|
||||
<div key={item.id} className="border-b border-spa-stone/10 last:border-0">
|
||||
{item.columns && item.columns.length > 0 ? (
|
||||
<button
|
||||
onClick={() => pushView({ type: 'mega', data: item.columns!, title: item.label })}
|
||||
className="w-full flex items-center justify-between py-4 text-sm font-medium tracking-wide text-spa-stone hover:text-spa-forest uppercase group"
|
||||
>
|
||||
<span>{getLocalizedText(item.label, lang)}</span>
|
||||
<ChevronRight className="w-4 h-4 text-spa-stone/40 group-hover:text-spa-forest transition-colors" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleLinkClick(item.url || '#')}
|
||||
className="w-full text-left py-4 text-sm font-medium tracking-wide text-spa-stone hover:text-spa-forest uppercase"
|
||||
>
|
||||
{getLocalizedText(item.label, lang)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{customer && (
|
||||
<div className="border-b border-spa-stone/10">
|
||||
<button
|
||||
onClick={() => handleLinkClick('/profile')}
|
||||
className="w-full text-left py-4 text-sm font-medium tracking-wide text-spa-stone hover:text-spa-forest uppercase"
|
||||
>
|
||||
👤 My Profile
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (view.type === 'mega') {
|
||||
return (
|
||||
<div className="px-6 py-4">
|
||||
{view.data.map((col, idx) => (
|
||||
<div key={idx} className="mb-8 last:mb-0">
|
||||
<h4 className="text-[10px] uppercase tracking-widest text-spa-stone/60 font-bold mb-4">
|
||||
{getLocalizedText(col.title, lang)}
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{col.links.map((link, lIdx) => (
|
||||
<div key={lIdx}>
|
||||
{link.links && link.links.length > 0 ? (
|
||||
<button
|
||||
onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
|
||||
className="w-full flex items-center justify-between py-2 text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest group"
|
||||
>
|
||||
<span>{getLocalizedText(link.label, lang)}</span>
|
||||
<ChevronRight className="w-4 h-4 text-spa-stone/40 group-hover:text-spa-forest transition-colors" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleLinkClick(link.url || '#')}
|
||||
className="w-full text-left py-2 text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest"
|
||||
>
|
||||
{getLocalizedText(link.label, lang)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (view.type === 'links') {
|
||||
return (
|
||||
<div className="px-6 py-4 space-y-2">
|
||||
{view.data.map((link, lIdx) => (
|
||||
<div key={lIdx}>
|
||||
{link.links && link.links.length > 0 ? (
|
||||
<button
|
||||
onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
|
||||
className="w-full flex items-center justify-between py-2 text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest group"
|
||||
>
|
||||
<span>{getLocalizedText(link.label, lang)}</span>
|
||||
<ChevronRight className="w-4 h-4 text-spa-stone/40 group-hover:text-spa-forest transition-colors" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleLinkClick(link.url || '#')}
|
||||
className="w-full text-left py-2 text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest"
|
||||
>
|
||||
{getLocalizedText(link.label, lang)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`fixed inset-0 z-[60] md:hidden transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
|
||||
<div
|
||||
className={`absolute inset-0 bg-spa-stone/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div
|
||||
className={`absolute top-0 right-0 h-full w-80 max-w-[85vw] bg-white shadow-2xl flex flex-col transition-transform duration-300 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}
|
||||
>
|
||||
{/* Static Top Header */}
|
||||
<div className="flex items-center justify-between px-6 py-5 border-b border-spa-stone/10 bg-white z-10 shrink-0">
|
||||
<span className="text-sm font-bold uppercase tracking-widest text-spa-forest">Menu</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={onOpenLang} className="px-2.5 py-1 rounded-md text-[10px] font-bold text-spa-forest border border-spa-forest/30 uppercase bg-spa-sage flex items-center gap-1 shrink-0">
|
||||
<Globe className="w-3 h-3" />
|
||||
{i18n.language.substring(0, 2).toUpperCase()}
|
||||
</button>
|
||||
<button onClick={onClose} className="p-1.5 rounded-full hover:bg-spa-sage transition-all text-spa-stone">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sliding Views Container */}
|
||||
<div className="flex-1 relative overflow-hidden bg-white">
|
||||
{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-white transition-transform duration-300 ease-in-out ${
|
||||
isCurrent ? 'translate-x-0' : isPast ? '-translate-x-full' : 'translate-x-full'
|
||||
}`}
|
||||
>
|
||||
{/* Back Button for nested views */}
|
||||
{index > 0 && (
|
||||
<button
|
||||
onClick={popView}
|
||||
className="flex items-center px-6 py-4 text-xs font-bold uppercase tracking-widest text-spa-forest border-b border-spa-stone/5 hover:bg-spa-sage transition-colors shrink-0"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 mr-2" />
|
||||
Back to {getLocalizedText(stack[index - 1].title, lang)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Optional View Title Header for nested views to emphasize context */}
|
||||
{index > 0 && (
|
||||
<div className="px-6 py-5 shrink-0">
|
||||
<h3 className="text-lg font-bold uppercase tracking-widest text-spa-forest">{getLocalizedText(view.title, lang)}</h3>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* View Content */}
|
||||
<div className="flex-1 overflow-y-auto pb-6">
|
||||
{renderView(view)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Static Bottom Footer */}
|
||||
<div className="px-6 pb-8 pt-6 border-t border-spa-stone/10 bg-white z-10 shrink-0 space-y-3">
|
||||
<button
|
||||
onClick={() => handleLinkClick('/shop')}
|
||||
className="block w-full py-3.5 bg-spa-forest text-white font-bold text-center rounded-xl text-xs uppercase tracking-widest hover:bg-spa-stone transition-colors duration-300 shadow-sm"
|
||||
>
|
||||
Shop Now
|
||||
</button>
|
||||
{customer ? (
|
||||
<button
|
||||
onClick={() => { logoutLiff(); onClose(); }}
|
||||
className="block w-full py-3.5 text-center rounded-xl text-xs font-bold uppercase tracking-widest text-rose-400 hover:bg-rose-50 transition-colors border border-rose-500/20"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => { loginLiff(); onClose(); }}
|
||||
className="block w-full py-3.5 text-center rounded-xl text-xs font-bold uppercase tracking-widest text-[#00B900] hover:bg-[#00B900]/10 transition-colors border border-[#00B900]/50"
|
||||
>
|
||||
Login with LINE
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user