# Sidebar Menu Organization

## TL;DR

> **Quick Summary**: Reorganize admin sidebar navigation into logical groups with section headers for better usability.
>
> **Deliverables**:
> - Updated src/shared/components/Sidebar.js — grouped navigation sections
>
> **Estimated Effort**: Quick
> **Parallel Execution**: NO - 1 task
> **Critical Path**: Task 1

---

## Context

### Original Request
User wants sidebar menu organized into logical groups (administrator, monitoring, etc.) for better navigation.

### Current State
Admin sidebar has 10 items in a flat list without any grouping:
- API Gateway, AI Providers, Model Combos, Usage Analytics, Quota Monitor, MITM Proxy, Developer Tools, Plan, Packages
- Plus: Team Members, Media Services (accordion), System section, Debug items, Profile, Settings

### Proposed Grouping

**Core / Overview:**
- API Gateway (endpoint)

**AI Configuration:**
- AI Providers
- Model Combos
- Packages

**Monitoring:**
- Usage Analytics
- Quota Monitor

**Tools:**
- Developer Tools
- MITM Proxy

**Users & Billing:**
- Team Members
- Plan

**System:**
- Media Services (accordion)
- Proxy Pools
- Skills Hub
- System Logs
- Request Translator
- Profile
- Settings

---

## Work Objectives

### Must Have
- Section headers with uppercase labels (e.g., "AI Configuration", "Monitoring")
- Logical grouping of related items
- Consistent styling with existing design system
- No functionality changes (just reorganization)

### Must NOT Have
- No changes to navigation logic
- No changes to active state detection
- No changes to mobile sidebar behavior
- No new dependencies

---

## TODOs

- [ ] 1. Reorganize Sidebar.js admin navigation into grouped sections

  **What to do**:
  - Split adminNavItems into multiple grouped arrays
  - Add section headers using p tags with text-xs font-semibold text-text-muted/60 uppercase tracking-wider
  - Groups:
    1. Core: API Gateway
    2. AI Configuration: AI Providers, Model Combos, Packages
    3. Monitoring: Usage Analytics, Quota Monitor
    4. Tools: Developer Tools, MITM Proxy
    5. Users and Billing: Team Members, Plan
    6. System: Media Services, Proxy Pools, Skills Hub, Debug items
    7. Account: Profile, Settings
  - Move Team Members from standalone Link to grouped section
  - Keep all existing functionality intact

  **Recommended Agent Profile**:
  - Category: quick
  - Skills: None needed

  **References**:
  - src/shared/components/Sidebar.js:20-31 — Current adminNavItems
  - src/shared/components/Sidebar.js:112-318 — AdminNav component
  - src/shared/components/Sidebar.js:163-166 — Existing section header style

  **Acceptance Criteria**:
  - Section headers visible for each group
  - All existing items still present
  - Active state still works
  - Mobile sidebar unaffected

  **Commit**: feat(ui): organize sidebar into grouped sections
  **Files**: src/shared/components/Sidebar.js

---

## Final Verification Wave

- [ ] F1. Visual verification — all items present, groups labeled
- [ ] F2. Active state works for each item
- [ ] F3. Mobile sidebar unaffected

---

## Success Criteria

- Sidebar shows organized groups with clear headers
- All navigation items accessible
- No functionality regression
