---
phase: 18-app-shell-navigation
plan: "02"
subsystem: templates/css
tags: [go, templ, sidebar, nav, css, collapse]
dependency_graph:
  requires: [18-01]
  provides: [rebuilt DashboardSidebar with GENERAL/PROJECTS sections, sidebar collapse toggle, is-collapsed CSS rules]
  affects: [backend/templates/app_layout.templ, backend/templates/app_layout_helpers.go, backend/internal/web/ui/app.css, backend/static/tailwind.css]
tech_stack:
  added: []
  patterns: [inline JS onclick toggle, CSS class-driven collapse state, sidebar section labels]
key_files:
  created: []
  modified:
    - backend/templates/app_layout.templ
    - backend/templates/app_layout_helpers.go
    - backend/internal/web/ui/app.css
    - backend/static/tailwind.css
decisions:
  - Inline JS onclick on collapse button (no Alpine.js, no server round-trip — state resets on reload per D-09)
  - sidebar-is-collapsed toggled on .dashboard-shell wrapper (not on .dashboard-sidebar child) — correct for CSS grid column targeting per Research Pitfall 3
  - PROJECTS section inlined directly in DashboardSidebar (SidebarProjectsSection component kept in file but no longer called)
  - SidebarOrganizationFooter removed from DashboardSidebar call (moves to avatar dropdown in Plan 03)
metrics:
  duration: ~10min
  completed: "2026-05-17"
  tasks: 3
  files: 4
---

# Phase 18 Plan 02: Sidebar Rebuild Summary

**One-liner:** Full HTML/CSS rebuild of DashboardSidebar to Figma spec — two-section structure (GENERAL + PROJECTS), 5-item nav replacing old 5-item set, collapse toggle via inline JS, collapsed-state CSS rules in app.css + regenerated tailwind.css.

## Tasks Completed

| # | Task | Commit | Files |
|---|------|--------|-------|
| 1 | Update sidebarPrimaryNavItems and add team icon | 2763fc1 | app_layout_helpers.go, app_layout.templ |
| 2 | Rebuild DashboardSidebar HTML with sections and collapse button | b592a02 | app_layout.templ |
| 3 | Add sidebar collapsed-state CSS and regenerate tailwind.css | 8a91183 | app.css, tailwind.css |

## Decisions Made

- **Inline JS onclick** on the collapse button — toggles `sidebar-is-collapsed` on `.dashboard-shell`; no Alpine.js dependency, no server round-trip, state resets on page reload per D-09
- **Target `.dashboard-shell` for collapse CSS** — grid column must be controlled on the shell wrapper, not the sidebar child (per Research Pitfall 3)
- **PROJECTS section inlined** into DashboardSidebar body rather than delegating to `SidebarProjectsSection` — keeps the new structure flat and avoids the HR separator; the standalone component remains in the file for Plan 03 cleanup
- **SidebarOrganizationFooter no longer called** from DashboardSidebar — it moves to the avatar dropdown in Plan 03; component kept in file to avoid breaking Plan 03 which references it

## Verification

- `templ generate ./...` — zero errors
- `go build ./...` — zero errors
- `go test ./...` — all tests pass (backend/internal/web: 0.310s, backend/templates: 0.529s)
- `grep -c "sidebar-is-collapsed" backend/static/tailwind.css` — returns 1
- `grep "My Tasks\|Team Members" backend/templates/app_layout_helpers.go` — shows updated nav items

## Deviations from Plan

None — plan executed exactly as written.

## Known Stubs

- `SidebarOrganizationFooter` component exists in `app_layout.templ` but is no longer called from `DashboardSidebar`. Plan 03 will repurpose or remove it when building the avatar dropdown.
- `SidebarProjectsSection` component exists but is no longer called; Plan 03 will clean up.
- The `DividerAfter` field on `sidebarNavItem` struct is unused (kept for zero-diff struct compatibility); can be removed in a later cleanup.

## Threat Flags

None — tablo.Color.String is user's own data interpolated into a `style` attribute, which is acceptable per T-18-02-01 disposition. CSS artifact edit-path enforced (app.css → tailwind.css pipeline, never direct edit of tailwind.css).

## Self-Check: PASSED

- `backend/templates/app_layout.templ` — exists, DashboardSidebar has GENERAL/PROJECTS sections and collapse button
- `backend/templates/app_layout_helpers.go` — exists, sidebarPrimaryNavItems returns 5 items with Home/My Tasks/Projects/Events/Team Members
- `backend/internal/web/ui/app.css` — exists, contains sidebar-is-collapsed block
- `backend/static/tailwind.css` — exists, grep returns 1 for sidebar-is-collapsed
- Commits 2763fc1, b592a02, 8a91183 — all present in git log
