docs(18-02): complete sidebar rebuild plan summary
- Rebuilt DashboardSidebar with GENERAL/PROJECTS sections and collapse button - Updated sidebarPrimaryNavItems to Figma-spec 5 items - Added sidebar-is-collapsed CSS rules and regenerated tailwind.css
This commit is contained in:
Arthur Belleville
parent
8a91183639
commit
5dc21340b0
1 changed files with 79 additions and 0 deletions
79
.planning/phases/18-app-shell-navigation/18-02-SUMMARY.md
Normal file
79
.planning/phases/18-app-shell-navigation/18-02-SUMMARY.md
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
---
|
||||||
|
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
|
||||||
Loading…
Reference in a new issue