# Specification: 034-collapsible-sidebar-menu

## Status

| Field | Value |
|-------|-------|
| **Created** | 2026-02-07 |
| **Current Phase** | READY FOR IMPLEMENTATION |
| **Last Updated** | 2026-02-07 |
| **Plan Review** | 2026-02-07 (Codex) |

## Documents

| Document | Status | Notes |
|----------|--------|-------|
| product-requirements.md | completed | Full PRD with MoSCoW features, personas, metrics |
| solution-design.md | completed | CSS-first architecture, hover timing, localStorage persistence |
| implementation-plan.md | completed | 5 phases, 45+ tasks, reviewed by Codex |

**Status values**: `pending` | `in_progress` | `completed` | `skipped`

## Codex Plan Review (2026-02-07)

### Key Findings Addressed
- **Blockers Fixed**:
  - Added analytics event instrumentation (sidebar_expand, sidebar_collapse, sidebar_pin, sidebar_nav_click)
  - Added all SDD-defined interfaces (.sidebar-expanded, .sidebar-animating, .sidebar-hide-collapsed, etc.)
  - Added store picker abbreviated/full state handling
  - Added tooltip 300ms delay configuration

- **Important Items Addressed**:
  - Added reduced motion CSS support (prefers-reduced-motion media query)
  - Added active menu indicator visibility validation
  - Added PRD edge case handling (cursor-on-load, dropdown, page navigation)
  - Added analytics validation section to Phase 5

### Documented Deviations
1. **JS Timing Constants**: Using JS constants (150ms, 200ms) instead of reading CSS vars - simpler, no DOM access needed
2. **Width Transitions**: Using `width` transition (not `transform`) - standard sidebar pattern, simpler layout

### Scope Clarifications
- Touch device tap-to-toggle (PRD Could-have) is **out of scope** for this implementation

### Final Metrics
- **Phases**: 5 (sequential with 2 parallel opportunities)
- **Total Tasks**: 45+
- **Estimated Complexity**: Medium-High (CSS + JS + template changes)

## Decisions Log

| Date | Decision | Rationale |
|------|----------|-----------|
| 2026-02-07 | Target: Admin Sidebar | User selected main navigation (250px sidebar with MetisMenu) over Workspace sidebar |
| 2026-02-07 | Start with PRD | User chose full requirements documentation before design |
| 2026-02-07 | JS constants for timing | Simpler than reading CSS vars, documented deviation |
| 2026-02-07 | Width not transform for animation | Standard sidebar pattern, simpler layout model |
| 2026-02-07 | Touch device support deferred | Could-have feature, out of scope for initial implementation |

## Context

**Initial Request**: Refactor our sidebar menu to be collapsible. Collapse by default and open wider on mouseover over the content.

**Target Component**: Admin Sidebar (`userfrosting/templates/themes/default/menus/sidebar.html`)

**Key Files**:
- Template: `userfrosting/templates/themes/default/menus/sidebar.html`
- CSS: `public_html/css/admin/admin-theme.css` (lines 1698-2017)
- JS: `public_html/js/sb-admin-2.js`
- MetisMenu: `public_html/js/lib/metisMenu.js`

**Current State**:
- Fixed 250px width
- Always visible on desktop
- Overlay toggle on mobile
- MetisMenu for collapsible submenu items
- Dark theme (neutral-900 background)

**Desired State**:
- Collapsed by default (icon-only view)
- Expands on hover/mouseover
- Smooth animation for expand/collapse
- Maintains current menu functionality

---
*This file is managed by the specification-management skill.*