WooNooW/APPEARANCE_MENU_RESTRUCTURE.md

Appearance Menu Restructure ✅

Date: November 27, 2025
Status: IN PROGRESS

---

🎯 GOALS

1. ✅ Add Appearance menu to both Sidebar and TopNav
2. ✅ Fix path conflict (was /settings/customer-spa, now /appearance)
3. ✅ Move CustomerSPA.tsx to Appearance folder
4. ✅ Create page-specific submenus structure
5. ⏳ Create placeholder pages for each submenu
6. ⏳ Update App.tsx routes

---

📁 NEW FOLDER STRUCTURE

admin-spa/src/routes/
├── Appearance/           ← NEW FOLDER
│   ├── index.tsx        ← Redirects to /appearance/themes
│   ├── Themes.tsx       ← Moved from Settings/CustomerSPA.tsx
│   ├── Shop.tsx         ← Shop page appearance
│   ├── Product.tsx      ← Product page appearance
│   ├── Cart.tsx         ← Cart page appearance
│   ├── Checkout.tsx     ← Checkout page appearance
│   ├── ThankYou.tsx     ← Thank you page appearance
│   └── Account.tsx      ← My Account/Customer Portal appearance
└── Settings/
    ├── Store.tsx
    ├── Payments.tsx
    ├── Shipping.tsx
    ├── Tax.tsx
    ├── Customers.tsx
    ├── Notifications.tsx
    └── Developer.tsx

---

🗺️ NAVIGATION STRUCTURE

Appearance Menu

• Path: /appearance
• Icon: palette
• Submenus:
  1. Themes → /appearance/themes (Main SPA activation & layout selection)
  2. Shop → /appearance/shop (Shop page customization)
  3. Product → /appearance/product (Product page customization)
  4. Cart → /appearance/cart (Cart page customization)
  5. Checkout → /appearance/checkout (Checkout page customization)
  6. Thank You → /appearance/thankyou (Order confirmation page)
  7. My Account → /appearance/account (Customer portal customization)

---

✅ CHANGES MADE

1. Backend - NavigationRegistry.php

[
    'key'      => 'appearance',
    'label'    => __('Appearance', 'woonoow'),
    'path'     => '/appearance',  // Changed from /settings/customer-spa
    'icon'     => 'palette',
    'children' => [
        ['label' => __('Themes', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/themes'],
        ['label' => __('Shop', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/shop'],
        ['label' => __('Product', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/product'],
        ['label' => __('Cart', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/cart'],
        ['label' => __('Checkout', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/checkout'],
        ['label' => __('Thank You', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/thankyou'],
        ['label' => __('My Account', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/account'],
    ],
],

Version bumped: 1.0.3

2. Frontend - App.tsx

Added Palette icon:

import { ..., Palette, ... } from 'lucide-react';

Updated Sidebar to use dynamic navigation:

function Sidebar() {
  const iconMap: Record<string, any> = {
    'layout-dashboard': LayoutDashboard,
    'receipt-text': ReceiptText,
    'package': Package,
    'tag': Tag,
    'users': Users,
    'palette': Palette,  // ← NEW
    'settings': SettingsIcon,
  };
  
  const navTree = (window as any).WNW_NAV_TREE || [];
  
  return (
    <aside>
      <nav>
        {navTree.map((item: any) => {
          const IconComponent = iconMap[item.icon] || Package;
          return <ActiveNavLink ... />;
        })}
      </nav>
    </aside>
  );
}

Updated TopNav to use dynamic navigation:

function TopNav({ fullscreen = false }: { fullscreen?: boolean }) {
  // Same icon mapping and navTree logic as Sidebar
  const navTree = (window as any).WNW_NAV_TREE || [];
  
  return (
    <div>
      {navTree.map((item: any) => {
        const IconComponent = iconMap[item.icon] || Package;
        return <ActiveNavLink ... />;
      })}
    </div>
  );
}

3. File Moves

• ✅ Created /admin-spa/src/routes/Appearance/ folder
• ✅ Moved Settings/CustomerSPA.tsx → Appearance/Themes.tsx
• ✅ Created Appearance/index.tsx (redirects to themes)
• ✅ Created Appearance/Shop.tsx (placeholder)

---

⏳ TODO

Create Remaining Placeholder Pages:

1. Appearance/Product.tsx
2. Appearance/Cart.tsx
3. Appearance/Checkout.tsx
4. Appearance/ThankYou.tsx
5. Appearance/Account.tsx

Update App.tsx Routes:

// Add imports
import AppearanceIndex from '@/routes/Appearance';
import AppearanceThemes from '@/routes/Appearance/Themes';
import AppearanceShop from '@/routes/Appearance/Shop';
import AppearanceProduct from '@/routes/Appearance/Product';
import AppearanceCart from '@/routes/Appearance/Cart';
import AppearanceCheckout from '@/routes/Appearance/Checkout';
import AppearanceThankYou from '@/routes/Appearance/ThankYou';
import AppearanceAccount from '@/routes/Appearance/Account';

// Add routes
<Route path="/appearance" element={<AppearanceIndex />} />
<Route path="/appearance/themes" element={<AppearanceThemes />} />
<Route path="/appearance/shop" element={<AppearanceShop />} />
<Route path="/appearance/product" element={<AppearanceProduct />} />
<Route path="/appearance/cart" element={<AppearanceCart />} />
<Route path="/appearance/checkout" element={<AppearanceCheckout />} />
<Route path="/appearance/thankyou" element={<AppearanceThankYou />} />
<Route path="/appearance/account" element={<AppearanceAccount />} />

Remove Old Route:

// DELETE THIS:
<Route path="/settings/customer-spa" element={<SettingsCustomerSPA />} />

---

🎨 DESIGN PHILOSOPHY

Each Appearance submenu will allow customization of:

1. Themes - Overall SPA activation, layout selection (Classic/Modern/Boutique/Launch)
2. Shop - Product grid, filters, sorting, categories display
3. Product - Image gallery, description layout, reviews, related products
4. Cart - Cart table, coupon input, shipping calculator
5. Checkout - Form fields, payment methods, order summary
6. Thank You - Order confirmation message, next steps, upsells
7. My Account - Dashboard, orders, addresses, downloads

---

🔍 VERIFICATION

After completing TODO:

1. ✅ Appearance shows in Sidebar (both fullscreen and normal)
2. ✅ Appearance shows in TopNav
3. ✅ Clicking Appearance goes to /appearance → redirects to /appearance/themes
4. ✅ Settings menu is NOT active when on Appearance
5. ✅ All 7 submenus are accessible
6. ✅ No 404 errors

---

Last Updated: November 27, 2025
Version: 1.0.3
Status: Awaiting route updates in App.tsx