dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: simplify More page - Marketing as simple button without submenu

Browse Source 
- Remove inline submenu expansion for Marketing
- Keep it consistent with Appearance and Settings (simple buttons)
- Description provides enough context about what's inside
This commit is contained in:
Dwindi Ramadhana
2025-12-31 14:27:06 +07:00
parent 771c48e4bb
commit 2dbc43a4eb
1 changed files with 16 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
admin-spa/src/routes/More/index.tsx
View File

@@ -12,7 +12,6 @@ interface MenuItem {
label: string;
description: string;
to: string;
children?: { label: string; to: string }[];
}
const menuItems: MenuItem[] = [
@@ -20,11 +19,7 @@ const menuItems: MenuItem[] = [
icon: <Megaphone className="w-5 h-5" />,
label: __('Marketing'),
description: __('Newsletter, coupons, and promotions'),
to: '/marketing',
children: [
{ label: __('Newsletter'), to: '/marketing/newsletter' },
{ label: __('Coupons'), to: '/coupons' },
]
to: '/marketing'
},
{
icon: <Palette className="w-5 h-5" />,
@@ -80,37 +75,22 @@ export default function MorePage() {
{/* Menu Items */}
<div className="divide-y">
{menuItems.map((item) => (
<div key={item.to}>
<button
onClick={() => navigate(item.to)}
className="w-full flex items-center gap-4 py-4 hover:bg-accent transition-colors"
>
<div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
{item.icon}
<button
key={item.to}
onClick={() => navigate(item.to)}
className="w-full flex items-center gap-4 py-4 hover:bg-accent transition-colors"
>
<div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
{item.icon}
</div>
<div className="flex-1 text-left min-w-0">
<div className="font-medium">{item.label}</div>
<div className="text-sm text-muted-foreground truncate">
{item.description}
</div>
<div className="flex-1 text-left min-w-0">
<div className="font-medium">{item.label}</div>
<div className="text-sm text-muted-foreground truncate">
{item.description}
</div>
</div>
<ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
</button>
{/* Submenu items */}
{item.children && item.children.length > 0 && (
<div className="pl-14 pb-2 space-y-1">
{item.children.map((child) => (
<button
key={child.to}
onClick={() => navigate(child.to)}
className="w-full text-left py-2 px-3 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
>
{child.label}
</button>
))}
</div>
)}
</div>
</div>
<ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
</button>
))}
</div>