smoothschedule/frontend/NAVIGATION_REDESIGN_PLAN.md

# Navigation Redesign Plan

## Overview

Redesigning both the main sidebar and settings page navigation to be more organized and scalable.

## Current Issues

### Main Sidebar
- 15+ items in a flat list with no grouping
- Dropdowns (Plugins, Help) hide important items
- No visual hierarchy or section headers
- Settings isolated at bottom

### Settings Page
- 7 horizontal tabs getting crowded
- Not scalable for new settings
- No logical grouping

---

## Phase 1: Refactor Main Sidebar (COMPLETED)

### New Structure with Grouped Sections

```
[Logo] Business Name
subdomain.smoothschedule

○ Dashboard
○ Scheduler
○ Tasks

MANAGE
○ Customers
○ Services
○ Resources
○ Staff

COMMUNICATE
○ Messages
○ Tickets

MONEY
○ Payments

EXTEND
○ Plugins
○ Email Templates

──────────
○ Settings
○ Help & Docs
──────────
[User] Sign Out
```

### Files Created/Modified
- `src/components/navigation/SidebarComponents.tsx` - Shared components (DONE)
- `src/components/Sidebar.tsx` - Refactor to use new components (TODO)

---

## Phase 2: Settings Sidebar Layout

### New Settings Structure

Settings becomes a sub-application with its own sidebar:

```
/settings
├── /general          - Business name, timezone, etc.
├── /branding         - Logo, colors, display mode
├── /resource-types   - Resource type management
├── /domains          - Custom domains
├── /api-tokens       - API access tokens
├── /authentication   - OAuth, social login
├── /email            - Email addresses for tickets
├── /communication    - SMS & calling credits
├── /billing          - Subscription, credits, invoices (future)
```

### Settings Sidebar Layout

```
┌──────────────────┬──────────────────────────────────────────┐
│ ← Back to App    │                                          │
│                  │  [Page Title]                            │
│ BUSINESS         │  [Page Description]                      │
│ ○ General        │                                          │
│ ○ Branding       │  [Content Area]                          │
│ ○ Resource Types │                                          │
│                  │                                          │
│ INTEGRATIONS     │                                          │
│ ○ Domains        │                                          │
│ ○ API & Webhooks │                                          │
│                  │                                          │
│ ACCESS           │                                          │
│ ○ Authentication │                                          │
│                  │                                          │
│ COMMUNICATION    │                                          │
│ ○ Email Setup    │                                          │
│ ○ SMS & Calling  │                                          │
│                  │                                          │
│ BILLING          │                                          │
│ ○ Credits        │                                          │
│                  │                                          │
└──────────────────┴──────────────────────────────────────────┘
```

### Files to Create
1. `src/components/navigation/SettingsSidebar.tsx` - Settings-specific sidebar
2. `src/layouts/SettingsLayout.tsx` - Layout wrapper with sidebar + content
3. Split `src/pages/Settings.tsx` into:
   - `src/pages/settings/GeneralSettings.tsx`
   - `src/pages/settings/BrandingSettings.tsx`
   - `src/pages/settings/ResourceTypesSettings.tsx`
   - `src/pages/settings/DomainsSettings.tsx`
   - `src/pages/settings/ApiTokensSettings.tsx`
   - `src/pages/settings/AuthenticationSettings.tsx`
   - `src/pages/settings/EmailSettings.tsx`
   - `src/pages/settings/CommunicationSettings.tsx`

### Route Updates (in App.tsx or routes file)

```tsx
<Route path="/settings" element={<SettingsLayout />}>
  <Route index element={<Navigate to="/settings/general" replace />} />
  <Route path="general" element={<GeneralSettings />} />
  <Route path="branding" element={<BrandingSettings />} />
  <Route path="resource-types" element={<ResourceTypesSettings />} />
  <Route path="domains" element={<DomainsSettings />} />
  <Route path="api-tokens" element={<ApiTokensSettings />} />
  <Route path="authentication" element={<AuthenticationSettings />} />
  <Route path="email" element={<EmailSettings />} />
  <Route path="communication" element={<CommunicationSettings />} />
</Route>
```

---

## Implementation Order

1. ✅ Create shared sidebar components (`SidebarComponents.tsx`)
2. ✅ Refactor main `Sidebar.tsx` to use grouped sections
3. ✅ Create `SettingsLayout.tsx` (includes sidebar)
4. ⏳ Split Settings.tsx into sub-pages
5. ⬜ Update routes in App.tsx
6. ⬜ Test all navigation flows

## Files Created So Far

- `src/components/navigation/SidebarComponents.tsx` - Shared nav components
- `src/components/Sidebar.tsx` - Refactored with grouped sections
- `src/layouts/SettingsLayout.tsx` - Settings page wrapper with sidebar
- `src/pages/settings/` - Directory for settings sub-pages (in progress)

---

## Component APIs

### SidebarSection
```tsx
<SidebarSection title="MANAGE" isCollapsed={isCollapsed}>
  <SidebarItem to="/customers" icon={Users} label="Customers" />
</SidebarSection>
```

### SidebarItem
```tsx
<SidebarItem
  to="/settings"
  icon={Settings}
  label="Settings"
  isCollapsed={isCollapsed}
  exact={true}
  badge="3"  // optional badge
/>
```

### SettingsSidebarSection / SettingsSidebarItem
```tsx
<SettingsSidebarSection title="BUSINESS">
  <SettingsSidebarItem
    to="/settings/general"
    icon={Building2}
    label="General"
    description="Business name, timezone"
  />
</SettingsSidebarSection>
```

---

## Notes

- Main sidebar uses white/transparent colors (gradient background)
- Settings sidebar uses gray/brand colors (white background)
- Both support collapsed state on main sidebar
- Settings sidebar is always expanded (no collapse)
- Mobile: Main sidebar becomes drawer, Settings sidebar becomes sheet/drawer