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)

<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

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

SidebarItem

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

SettingsSidebarSection / SettingsSidebarItem

<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