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

fix: align mobile bottom bar with desktop nav structure

Browse Source 
- Add Marketing section to More page with Newsletter and Coupons submenu
- Remove standalone Coupons entry (now under Marketing)
- Add submenu rendering support for items with children
- Use Megaphone icon for Marketing section
This commit is contained in:
Dwindi Ramadhana
2025-12-31 14:19:08 +07:00
parent 4104c6d6ba
commit 771c48e4bb
1 changed files with 47 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Tag, Settings as SettingsIcon, Palette, ChevronRight, Minimize2, LogOut, Sun, Moon, Monitor, ExternalLink } from 'lucide-react';
import { Tag, Settings as SettingsIcon, Palette, ChevronRight, Minimize2, LogOut, Sun, Moon, Monitor, ExternalLink, Mail, Megaphone } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { usePageHeader } from '@/contexts/PageHeaderContext';
import { useApp } from '@/contexts/AppContext';
@@ -12,14 +12,19 @@ interface MenuItem {
label: string;
description: string;
to: string;
children?: { label: string; to: string }[];
}
const menuItems: MenuItem[] = [
{
icon: <Tag className="w-5 h-5" />,
label: __('Coupons'),
description: __('Manage discount codes and promotions'),
to: '/coupons'
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' },
]
},
{
icon: <Palette className="w-5 h-5" />,
@@ -40,7 +45,7 @@ export default function MorePage() {
const { setPageHeader, clearPageHeader } = usePageHeader();
const { isStandalone, exitFullscreen } = useApp();
const { theme, setTheme } = useTheme();
useEffect(() => {
setPageHeader(__('More'));
return () => clearPageHeader();
@@ -56,7 +61,7 @@ export default function MorePage() {
// Clear auth and redirect to login
window.location.href = window.WNW_CONFIG?.wpAdminUrl || '/wp-admin';
};
const themeOptions = [
{ value: 'light', icon: <Sun className="w-5 h-5" />, label: __('Light') },
{ value: 'dark', icon: <Moon className="w-5 h-5" />, label: __('Dark') },
@@ -75,22 +80,37 @@ export default function MorePage() {
{/* Menu Items */}
<div className="divide-y">
{menuItems.map((item) => (
<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 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}
</div>
</div>
<ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
</button>
<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>
@@ -102,11 +122,10 @@ export default function MorePage() {
<button
key={option.value}
onClick={() => setTheme(option.value as 'light' | 'dark' | 'system')}
className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${
theme === option.value
? 'border-primary bg-primary/10'
: 'border-border hover:border-primary/50'
}`}
className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${theme === option.value
? 'border-primary bg-primary/10'
: 'border-border hover:border-primary/50'
}`}
>
{option.icon}
<span className="text-xs font-medium">{option.label}</span>
@@ -127,7 +146,7 @@ export default function MorePage() {
{__('Go to WP Admin')}
</Button>
)}
{isStandalone ? (
<Button
onClick={handleLogout}