admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-06-20 23:51:57 -04:00
1 parent 74b9670c79
commit 73590e06c4
37 files changed
+964 -709
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/components/navigation/DesktopMegaMenu.tsx
+5 -5
View File
@@ -43,8 +43,8 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
href={item.url || '#'}
className={`flex items-center gap-1 border-b py-2 transition-colors ${
isOpen || isActive
? 'border-pop-pink text-pop-black'
: 'border-transparent text-pop-black hover:border-pop-pink hover:text-pop-black'
? 'border-brand-primary text-text-main'
: 'border-transparent text-text-main hover:border-brand-primary hover:text-text-main'
}`}
>
{getLocalizedMenuText(item.label, lang)}
@@ -69,11 +69,11 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
onMouseEnter={() => handleOpen(uniqueId)}
onMouseLeave={handleClose}
>
<div className="w-full cursor-default border-b border-black/5 bg-white/95 shadow-brutal backdrop-blur-xl">
<div className="w-full cursor-default border-b border-black/5 bg-surface-card/95 shadow-card backdrop-blur-xl">
<div className="mx-auto flex max-w-7xl justify-center gap-16 px-6 py-10">
{item.columns!.map((column, columnIndex) => (
<div key={columnIndex} className="flex min-w-[140px] flex-col text-left">
<h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-pop-black/50">
<h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-text-main/50">
{getLocalizedMenuText(column.title, lang)}
</h4>
<ul className="space-y-3">
@@ -81,7 +81,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
<li key={linkIndex}>
<Link
href={link.url || '#'}
className="block text-sm font-normal normal-case tracking-normal text-pop-black/65 transition-colors hover:text-pop-pink"
className="block text-sm font-normal normal-case tracking-normal text-text-main/65 transition-colors hover:text-brand-primary"
>
{getLocalizedMenuText(link.label, lang)}
</Link>
apps/website/src/components/navigation/MobileDrawer.tsx
+24 -24
View File
@@ -57,22 +57,22 @@ export function MobileDrawer({
const pushView = (node: MenuNode) => setStack((prev) => [...prev, node])
const popView = () => setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev))
const linkClass = 'block w-full py-4 text-left text-sm font-medium uppercase tracking-wide text-pop-black/65 transition-colors hover:text-pop-pink'
const nestedLinkClass = 'block w-full py-2 text-left text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink'
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-pop-black/10 last:border-0">
<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-pop-black/65 transition-colors hover:text-pop-pink"
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-pop-black/35 transition-colors group-hover:text-pop-pink" />
<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}>
@@ -82,7 +82,7 @@ export function MobileDrawer({
</div>
))}
{customerName && (
<div className="border-b border-pop-black/10">
<div className="border-b border-text-main/10">
<Link href="/profile" onClick={onClose} className={linkClass}>
My Profile
</Link>
@@ -97,7 +97,7 @@ export function MobileDrawer({
<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-pop-black/45">
<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">
@@ -106,10 +106,10 @@ export function MobileDrawer({
{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-pop-black/65 transition-colors hover:text-pop-pink"
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-pop-black/35 transition-colors group-hover:text-pop-pink" />
<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}>
@@ -132,10 +132,10 @@ export function MobileDrawer({
{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-pop-black/65 transition-colors hover:text-pop-pink"
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-pop-black/35 transition-colors group-hover:text-pop-pink" />
<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}>
@@ -151,31 +151,31 @@ export function MobileDrawer({
return (
<div className={`fixed inset-0 z-[60] transition-all duration-300 md:hidden ${isOpen ? 'visible' : 'invisible'}`}>
<div
className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
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-white shadow-2xl transition-transform duration-300 ${
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-pop-black/10 bg-white px-6 py-5">
<span className="text-sm font-bold uppercase tracking-widest text-pop-black">Menu</span>
<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-pop-pink/30 bg-pop-bg px-2.5 py-1 text-[10px] font-bold uppercase text-pop-pink"
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-pop-black/65 transition hover:bg-pop-bg hover:text-pop-pink">
<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-white">
<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
@@ -183,14 +183,14 @@ export function MobileDrawer({
return (
<div
key={index}
className={`absolute inset-0 flex flex-col bg-white transition-transform duration-300 ease-in-out ${
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-pop-black/5 px-6 py-4 text-xs font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg"
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)}
@@ -199,7 +199,7 @@ export function MobileDrawer({
{index > 0 && (
<div className="shrink-0 px-6 py-5">
<h3 className="text-lg font-bold uppercase tracking-widest text-pop-black">{getLocalizedMenuText(view.title, lang)}</h3>
<h3 className="text-lg font-bold uppercase tracking-widest text-text-main">{getLocalizedMenuText(view.title, lang)}</h3>
</div>
)}
@@ -209,11 +209,11 @@ export function MobileDrawer({
})}
</div>
<div className="z-10 shrink-0 space-y-3 border-t border-pop-black/10 bg-white px-6 pb-8 pt-6">
<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-pop-black py-3.5 text-center text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-pop-pink"
className="block w-full rounded-xl bg-text-main py-3.5 text-center text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-brand-primary"
>
Shop Now
</Link>
@@ -233,7 +233,7 @@ export function MobileDrawer({
onLogin()
onClose()
}}
className="block w-full rounded-xl border border-[#00B900]/50 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-[#00B900] transition-colors hover:bg-[#00B900]/10"
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>