From 771c48e4bbcad6a50e1ad30b7116eb525ca0c627 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Wed, 31 Dec 2025 14:19:08 +0700
Subject: [PATCH] fix: align mobile bottom bar with desktop nav structure

- 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
---
 admin-spa/src/routes/More/index.tsx | 75 ++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 28 deletions(-)

diff --git a/admin-spa/src/routes/More/index.tsx b/admin-spa/src/routes/More/index.tsx
index fcf2365..abed9e6 100644
--- a/admin-spa/src/routes/More/index.tsx
+++ b/admin-spa/src/routes/More/index.tsx
@@ -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}