---
name: project-playbook-pattern
description: "The playbook sidebar UI pattern used across Video, Social Media, and Marketing Analytics playbooks"
metadata: 
  node_type: memory
  type: project
  originSessionId: 306d4261-e4b9-44ea-9047-ee5cf562a734
---

All three playbooks (and Standard3 after a redesign) use the same sidebar UI pattern:

**Sidebar structure:** White background, `border-right: 1px solid #E5E7EB`, `position: sticky`, `top: var(--nav-height)`, `height: calc(100vh - var(--nav-height))`. Contains: sidebar-header (title + project manager + progress bar), phase groups with phase labels, step-btn buttons with step-check circles, sidebar-footer.

**Project switcher:** Each playbook stores multiple projects in localStorage under a namespaced key (e.g. `apex_dcs_video_projects_v1`). Functions: `newProject()` (prompts for name), `duplicateProject()` (prompts for name), `renameProject()`, `deleteProject()` (blocked if only one project). Save-before-switch bug was fixed — all switching functions call `saveState()` first.

**Step completion:** `.step-btn.done` adds a green checkmark to the `.step-check` circle. Progress bar fills via `updateProgress()`.

**Callout/teaching CSS classes:** `.callout`, `.callout-yellow`, `.callout-blue`, `.callout-green`, `.callout-purple`, `.glossary-term`, `.how-to-list` (numbered), `.platform-grid` (Social Media only).

**Why:** Pattern was built so student-associates can run multiple concurrent projects of the same type (e.g. two video projects) without duplicating files.

**How to apply:** If adding a new playbook or standard page, use this sidebar structure. The Marketing Analytics and Social Media playbooks are good reference implementations.