salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
748de099ddfc71ba98a8551b8bf045a5ffd5c990
igny8/to-do-s/part1/SECTION_6_FINAL_MODS.md
IGNY8 VPS (Salman) e5959c3e72 Section 6 COmpleted
2025-12-27 03:41:51 +00:00

495 lines
18 KiB
Markdown
Raw Blame History

# 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
---
Section 6 implementation is complete. Here's a summary of what was done:
## Section 6 Implementation Complete ✅
### Sidebar Changes
- **Removed** Linker and Optimizer modules from sidebar (not ready for launch)
- **Reordered** SETUP menu: Sites → Add Keywords → Content Settings → Thinker
- **Added dropdown sub-items** for all major modules with clickable navigation
### URL-Based Tab Navigation
Account pages now use URL paths instead of internal state for tabs:
- `/account/settings` → Account tab, `/account/settings/profile` → Profile, `/account/settings/team` → Team
- `/account/plans` → Current Plan, `/account/plans/upgrade` → Upgrade, `/account/plans/history` → History
- `/account/usage` → Limits, `/account/usage/credits` → Credits, `/account/usage/activity` → Activity
- `/account/content-settings` → Content Generation, `/account/content-settings/publishing` → Publishing, `/account/content-settings/images` → Images
### Navigation Cleanup
- **Removed ModuleNavigationTabs** from all module pages (Planner, Writer, Thinker, Sites)
- **Added breadcrumb prop** to PageHeader component
- All pages now display breadcrumb navigation (e.g., "Planner / Keywords")
### Files Modified
- AppSidebar.tsx - Sidebar restructure
- App.tsx - Added sub-routes
- PageHeader.tsx - Added breadcrumb prop
- 4 account pages - URL-based tab navigation
- 3 Planner pages, 5 Writer pages, 4 Thinker pages, 1 Sites page - Removed tabs, added breadcrumbs
- CHANGELOG.md - Updated to v1.1.8
Reference in New Issue View Git Blame Copy Permalink