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

@@ -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" />,
+    icon: <Megaphone className="w-5 h-5" />,
-    label: __('Coupons'),
+    label: __('Marketing'),
-    description: __('Manage discount codes and promotions'),
+    description: __('Newsletter, coupons, and promotions'),
-    to: '/coupons'
+    to: '/marketing',
+    children: [
+      { label: __('Newsletter'), to: '/marketing/newsletter' },
+      { label: __('Coupons'), to: '/coupons' },
+    ]
   },
   {
     icon: <Palette className="w-5 h-5" />,
@@ -75,8 +80,8 @@ export default function MorePage() {
       {/* Menu Items */}
       <div className="divide-y">
         {menuItems.map((item) => (
+          <div key={item.to}>
             <button
-            key={item.to}
               onClick={() => navigate(item.to)}
               className="w-full flex items-center gap-4 py-4 hover:bg-accent transition-colors"
             >
@@ -91,6 +96,21 @@ export default function MorePage() {
               </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,8 +122,7 @@ 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 ${
+              className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${theme === option.value
-                theme === option.value
                 ? 'border-primary bg-primary/10'
                 : 'border-border hover:border-primary/50'
                 }`}