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**
```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:**
```tsx
import { ..., Palette, ... } from 'lucide-react';
```

**Updated Sidebar to use dynamic navigation:**
```tsx
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:**
```tsx
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:**
```tsx
// 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:**
```tsx
// 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