# Section 6: Sidebar & Navigation - Audit & Action Plan

**Date:** December 27, 2025  
**Status:** Finalized for Implementation  
**Scope:** Sidebar structure, navigation restructure (tabs → sidebar dropdowns)

---

## 6.1 Current Navigation Structure

**File:** `layout/AppSidebar.tsx`

```
Dashboard (standalone)
├─ SETUP
│   ├─ Add Keywords → /setup/add-keywords
│   ├─ Content Settings → /account/content-settings
│   ├─ Sites → /sites
│   └─ Thinker (admin only) → /thinker/prompts
├─ WORKFLOW
│   ├─ Planner → /planner/keywords
│   ├─ Writer → /writer/tasks
│   ├─ Automation → /automation
│   ├─ Linker → /linker/content [NOT ACTIVE - REMOVE]
│   └─ Optimizer → /optimizer/content [NOT ACTIVE - REMOVE]
├─ ACCOUNT
│   ├─ Account Settings → /account/settings
│   ├─ Plans & Billing → /account/plans
│   ├─ Usage → /account/usage
│   └─ AI Models (admin only) → /settings/integration
└─ HELP
    └─ Help & Docs → /help
```

### Current In-Page Navigation (TO BE REMOVED)

| Module | Current Tabs/Buttons | Location |
|--------|---------------------|----------|
| **Planner** | Keywords, Clusters, Ideas | Tab buttons in page header |
| **Writer** | Queue, Drafts, Images, Review, Published | Tab buttons in page header |
| **Account Settings** | Account, Profile, Team | Tabs in page |
| **Plans & Billing** | Current Plan, Upgrade Plan, History | Tabs in page |
| **Usage** | Your Limits & Usage, Credit History, API Activity | Tabs in page |
| **Content Settings** | Content Generation, Publishing, Image Settings | Tabs in page |

---

## 6.2 Issues to Address

| # | Issue | Priority | Action |
|---|-------|----------|--------|
| 1 | Linker in navigation | High | **REMOVE** - not active module |
| 2 | Optimizer in navigation | High | **REMOVE** - not active module |
| 3 | KeywordOpportunities reference | High | **REMOVE** - page being deleted |
| 4 | Help sub-pages in routes | High | **REMOVE** - pages being deleted |
| 5 | Menu order incorrect | High | Reorder SETUP: Sites → Add Keywords → Content Settings → Thinker |
| 6 | Tabs/buttons clutter page headers | High | **MOVE to sidebar dropdowns** |
| 7 | No breadcrumb navigation | Medium | Add breadcrumbs (space now available in header) |
| 8 | No "Next Step" guidance | Medium | Add contextual next step (space now available in header) |
| 9 | No active section highlighting | Medium | Highlight current section/page in sidebar |
| 10 | Credit purchase not in sidebar | Low | Accessible from Plans & Billing |

---

## 6.3 New Navigation Structure: Sidebar Dropdowns

### Decision: Move All Sub-Navigation to Sidebar

**Rationale:**
- New app launch - no existing user patterns to unlearn
- Desktop-only app - no mobile concerns
- Same number of clicks - active dropdown stays expanded automatically
- Cleaner page headers - space for breadcrumbs and "Next Step" CTAs
- Better discoverability - all navigation visible in one place
- Scalable - easy to add new sub-pages in future
- Consistent pattern across all modules

### New Sidebar Structure

```
Dashboard

SETUP
├─ Sites ▼
│   ├─ All Sites           → /sites
│   └─ Site Settings       → /sites/:id/settings (contextual)
├─ Add Keywords            → /setup/add-keywords
├─ Content Settings ▼
│   ├─ Content Generation  → /account/content-settings/generation
│   ├─ Publishing          → /account/content-settings/publishing
│   └─ Image Settings      → /account/content-settings/images
└─ Thinker (admin only) ▼
    ├─ Prompts             → /thinker/prompts
    └─ Author Profiles     → /thinker/author-profiles

WORKFLOW
├─ Planner ▼
│   ├─ Keywords            → /planner/keywords
│   ├─ Clusters            → /planner/clusters
│   └─ Ideas               → /planner/ideas
├─ Writer ▼
│   ├─ Queue               → /writer/tasks
│   ├─ Drafts              → /writer/drafts
│   ├─ Images              → /writer/images
│   ├─ Review              → /writer/review
│   └─ Published           → /writer/published
└─ Automation              → /automation

ACCOUNT
├─ Account Settings ▼
│   ├─ Account             → /account/settings/account
│   ├─ Profile             → /account/settings/profile
│   └─ Team                → /account/settings/team
├─ Plans & Billing ▼
│   ├─ Current Plan        → /account/plans/current
│   ├─ Upgrade Plan        → /account/plans/upgrade
│   └─ History             → /account/plans/history
├─ Usage ▼
│   ├─ Limits & Usage      → /account/usage/limits
│   ├─ Credit History      → /account/usage/credits
│   └─ API Activity        → /account/usage/api
└─ AI Models (admin only)  → /settings/integration

HELP
└─ Help & Docs             → /help
```

---

## 6.4 Sidebar Behavior Specification

### Dropdown Behavior

1. **Active Page Detection:**
   - When user navigates to any page, its parent dropdown auto-expands
   - Current page is highlighted within the dropdown
   - Active dropdown stays expanded - does NOT collapse

2. **Click Behavior:**
   - Click on dropdown parent (if not expanded) → expands dropdown
   - Click on dropdown parent (if expanded) → collapses dropdown
   - Click on sub-item → navigates to that page, dropdown stays open
   - Only active page's dropdown auto-opens on page load

3. **Visual States:**
   ```
   Planner ▼                    ← Parent: expanded indicator
     Keywords                   ← Normal sub-item
     Clusters ●                 ← Active page: highlighted
     Ideas                      ← Normal sub-item
   
   Writer ▶                     ← Collapsed (not active)
   ```

4. **Persistence:**
   - Active dropdown remains expanded during navigation within that module
   - On direct URL access or refresh, opens dropdown containing current page
   - Non-active dropdowns default to collapsed state

### Example Flow

User is on `/planner/clusters`:

```
WORKFLOW
├─ Planner ▼                   [EXPANDED - contains active page]
│   ├─ Keywords                 [clickable]
│   ├─ Clusters ●               [ACTIVE - highlighted]
│   └─ Ideas                    [clickable]
├─ Writer ▶                    [COLLAPSED]
└─ Automation                  [no dropdown - single page]
```

User clicks "Ideas":
- Navigates to `/planner/ideas`
- Planner dropdown stays expanded
- "Ideas" becomes highlighted
- "Clusters" returns to normal state

User clicks "Writer":
- Writer dropdown expands
- Planner dropdown can stay expanded or collapse (design choice)
- Shows Writer sub-items

---

## 6.5 Page Header Structure (After Tabs Removal)

### Before (Current)
```
┌─────────────────────────────────────────────────────────────────────┐
│ [Keywords] [Clusters] [Ideas]    [+ Add] [Bulk ▼] [Filter] [Search] │
├─────────────────────────────────────────────────────────────────────┤
│ Content area...                                                      │
```

### After (New)
```
┌─────────────────────────────────────────────────────────────────────┐
│ Planner > Clusters              [+ Add] [Bulk ▼]  [Next: Ideas →]   │
├─────────────────────────────────────────────────────────────────────┤
│ [Filter] [Search...]                                                 │
├─────────────────────────────────────────────────────────────────────┤
│ Content area...                                                      │
```

### Header Components

| Component | Position | Purpose |
|-----------|----------|---------|
| Breadcrumb | Left | Shows: Section > Page (e.g., "Planner > Clusters") |
| Primary Actions | Center-Right | Add, Bulk actions |
| Next Step CTA | Right | Contextual "Next: [Action] →" button |
| Filters/Search | Below header or inline | Data filtering |

---

## 6.6 Breadcrumb Implementation

### Breadcrumb Pattern

```
[Section] > [Page]
[Section] > [Page] > [Detail]
```

### Examples

| Route | Breadcrumb Display |
|-------|-------------------|
| `/planner/keywords` | Planner > Keywords |
| `/planner/clusters` | Planner > Clusters |
| `/planner/clusters/:id` | Planner > Clusters > [Cluster Name] |
| `/writer/drafts` | Writer > Drafts |
| `/writer/drafts/:id` | Writer > Drafts > [Content Title] |
| `/account/settings/team` | Account Settings > Team |
| `/account/plans/upgrade` | Plans & Billing > Upgrade Plan |

### Implementation

- Create reusable `<Breadcrumb />` component
- Each page defines its breadcrumb trail via props or route config
- Clickable links except for current page (last item)

---

## 6.7 "Next Step" CTA Implementation

### Contextual Next Steps

| Current Location | Condition | Next Step CTA |
|------------------|-----------|---------------|
| Sites | Site created | "Next: Add Keywords →" |
| Add Keywords | Keywords added (count > 0) | "Next: Plan Your Content →" |
| Planner > Keywords | Has unclustered keywords | "Next: Cluster Keywords →" |
| Planner > Clusters | Cluster selected/has clusters | "Next: Generate Ideas →" |
| Planner > Ideas | Has ideas | "Next: Queue to Writer →" |
| Writer > Queue | Has tasks | "Next: Generate Content →" |
| Writer > Drafts | Has drafts | "Next: Review Drafts →" |
| Writer > Review | Has reviewed content | "Next: Publish →" |

### Implementation

- Create `<NextStepCTA />` component
- Each page determines when to show and what action
- Button styled prominently but not intrusive
- Links to logical next step in workflow

---

## 6.8 Route Updates Required

### Routes to Add/Update

To support sidebar navigation, routes need restructuring:

| Current Route | New Route | Notes |
|---------------|-----------|-------|
| `/account/content-settings` | `/account/content-settings/generation` | Default to first sub-page |
| (same page, different tab) | `/account/content-settings/publishing` | Separate route |
| (same page, different tab) | `/account/content-settings/images` | Separate route |
| `/account/settings` | `/account/settings/account` | Default to first sub-page |
| (same page, different tab) | `/account/settings/profile` | Separate route |
| (same page, different tab) | `/account/settings/team` | Separate route |
| `/account/plans` | `/account/plans/current` | Default to first sub-page |
| (same page, different tab) | `/account/plans/upgrade` | Separate route |
| (same page, different tab) | `/account/plans/history` | Separate route |
| `/account/usage` | `/account/usage/limits` | Default to first sub-page |
| (same page, different tab) | `/account/usage/credits` | Separate route |
| (same page, different tab) | `/account/usage/api` | Separate route |

### Routes to Remove

| Route | Reason |
|-------|--------|
| `/linker/*` | Module not active |
| `/optimizer/*` | Module not active |
| `/planner/keyword-opportunities` | Page deleted |
| `/help/docs` | Page deleted |
| `/help/system-testing` | Page deleted |
| `/help/function-testing` | Page deleted |
| `/billing/overview` | Legacy route |
| `/team` | Legacy route |
| `/profile` | Legacy route |

---

## 6.9 Implementation Plan

### Phase 1: Sidebar Restructure

1. **Update `AppSidebar.tsx`:**
   - Add dropdown functionality for multi-page modules
   - Implement expand/collapse with active state detection
   - Remove Linker and Optimizer
   - Reorder SETUP: Sites → Add Keywords → Content Settings → Thinker
   - Add visual indicators (▼ expanded, ▶ collapsed, ● active)

2. **Create dropdown data structure:**
   ```typescript
   const sidebarConfig = [
     {
       section: 'SETUP',
       items: [
         { label: 'Sites', path: '/sites', icon: Globe },
         { label: 'Add Keywords', path: '/setup/add-keywords', icon: Key },
         { 
           label: 'Content Settings', 
           icon: Settings,
           children: [
             { label: 'Content Generation', path: '/account/content-settings/generation' },
             { label: 'Publishing', path: '/account/content-settings/publishing' },
             { label: 'Image Settings', path: '/account/content-settings/images' },
           ]
         },
         // ... etc
       ]
     },
     // ... other sections
   ];
   ```

### Phase 2: Route Updates

1. **Update Router/App.tsx:**
   - Add new sub-routes for tabbed pages
   - Set up redirects from parent routes to default child
   - Remove deleted/inactive routes

2. **Example route structure:**
   ```typescript
   // Content Settings
   <Route path="/account/content-settings" element={<Navigate to="/account/content-settings/generation" />} />
   <Route path="/account/content-settings/generation" element={<ContentSettingsGeneration />} />
   <Route path="/account/content-settings/publishing" element={<ContentSettingsPublishing />} />
   <Route path="/account/content-settings/images" element={<ContentSettingsImages />} />
   ```

### Phase 3: Page Header Updates

1. **Remove tab components from all pages:**
   - Planner (Keywords, Clusters, Ideas tabs)
   - Writer (Queue, Drafts, Images, Review, Published tabs)
   - Account Settings (Account, Profile, Team tabs)
   - Plans & Billing (Current, Upgrade, History tabs)
   - Usage (Limits, Credits, API tabs)
   - Content Settings (Generation, Publishing, Images tabs)

2. **Add Breadcrumb component to each page**

3. **Add NextStepCTA component where applicable**

4. **Reorganize header layout:**
   - Left: Breadcrumb
   - Right: Actions + Next Step CTA

### Phase 4: Component Creation

1. **Create `components/navigation/Breadcrumb.tsx`**
2. **Create `components/navigation/NextStepCTA.tsx`**
3. **Create `components/navigation/SidebarDropdown.tsx`** (if not using existing UI library component)

---

## Summary

### Total Issues

| Category | High | Medium | Low | Total |
|----------|------|--------|-----|-------|
| Remove inactive modules | 2 | 0 | 0 | 2 |
| Remove deleted pages | 2 | 0 | 0 | 2 |
| Menu order | 1 | 0 | 0 | 1 |
| Navigation restructure | 1 | 0 | 0 | 1 |
| New features | 0 | 3 | 1 | 4 |
| **TOTAL** | **6** | **3** | **1** | **10** |

---

### High Priority Items

1. Remove Linker from sidebar navigation
2. Remove Optimizer from sidebar navigation
3. Remove KeywordOpportunities route references
4. Remove Help sub-page routes
5. Reorder SETUP menu: Sites → Add Keywords → Content Settings → Thinker
6. **Implement sidebar dropdown navigation (replace all tabs)**

---

### Medium Priority Items

1. Add breadcrumb navigation component
2. Add "Next Step" contextual guidance
3. Add active section highlighting in sidebar

---

### Files to Delete

| File | Reason |
|------|--------|
| Tab components in page headers | Replaced by sidebar navigation |
| Any standalone tab navigation components | No longer needed |

---

### Files to Create

| File | Purpose |
|------|---------|
| `components/navigation/Breadcrumb.tsx` | Reusable breadcrumb component |
| `components/navigation/NextStepCTA.tsx` | Contextual next step button |
| Possibly split page components | If current tabbed pages are single files, may need to split |

---

### Files to Modify

| File | Changes |
|------|---------|
| `layout/AppSidebar.tsx` | Complete restructure with dropdowns, remove inactive modules, reorder |
| `Router/App.tsx` | Add sub-routes, remove inactive routes, add redirects |
| `pages/Planner/*.tsx` | Remove tab navigation from header |
| `pages/Writer/*.tsx` | Remove tab navigation from header |
| `pages/account/AccountSettingsPage.tsx` | Split into separate route components OR remove tabs |
| `pages/account/PlansAndBillingPage.tsx` | Split into separate route components OR remove tabs |
| `pages/account/UsageAnalyticsPage.tsx` | Split into separate route components OR remove tabs |
| `pages/account/ContentSettingsPage.tsx` | Split into separate route components OR remove tabs |
| All page headers | Add Breadcrumb, reorganize layout, add NextStepCTA |

---

### Implementation Decision

**CONFIRMED: Implement sidebar-based navigation with dropdowns**

- Remove all tab/button navigation from page headers
- All sub-navigation moves to sidebar as expandable dropdowns
- Active dropdown stays expanded (same click count as current tabs)
- Page headers gain space for breadcrumbs and "Next Step" CTAs
- Clean, consistent navigation pattern across all modules

---