Move site navigation from top bar to Spectrum-style side nav

[lamontacrook]

Summary

Evolve the existing header block from a fixed top navigation bar into a Spectrum-style left sidebar (similar to spectrum.adobe.com), while keeping fragment-driven content from /fragments/nav/header.

Goals

• Left rail (~240px): brand, primary nav, actions (theme, language)
• Main content column: scrollable white canvas; footer stays in content column
• Mega menus become in-sidebar accordions (not full-width flyouts)
• Mobile: off-canvas drawer with overlay
• Ship behind layout-side-nav until validated, then default on

Reference

• Implementation plan: agent conversation (side nav migration)
• Visual/ CSS reference: Adobe Spectrum Design System/ui_kits/spectrum-app/kit.css (.sidenav, .nav-item)

Tasks

Phase 1 — Layout shell

• Add --sidenav-width and layout CSS (styles/layout-shell.css)
• Grid on body.layout-side-nav > sp-theme (header | main+footer)
• Remove top padding-top offset when side layout active
• Toggle via body.layout-side-nav (meta or scripts config)

Phase 2 — Header block

• Restructure blocks/header/header.js DOM classes for vertical sidenav
• Rewrite blocks/header/header.css for sidebar + accordion submenus
• Active link via aria-current="page"
• Secondary links section optional (fragment v2)

Phase 3 — Mobile

• Off-canvas drawer < 900px, scrim, focus trap, Escape to close
• Slim top bar or menu button on small screens

Phase 4 — Main / breadcrumbs / footer

• main.site-content class
• Breadcrumbs in main column (not hidden in header)
• grid-column: 2 for main and footer under sp-theme

Phase 5 — Authoring

• Document fragment structure for AEM authors
• Optional search field in sidebar

Phase 6 — Spectrum polish

• Align tokens in spectrum-bridge.css

Phase 7 — QA & rollout

• Locales, header=off, 404, dark mode, language popover
• Enable by default after soak

Files (expected)

• blocks/header/header.js, blocks/header/header.css
• styles/styles.css, styles/layout-shell.css, styles/spectrum-bridge.css
• scripts/ak.js, scripts/scripts.js
• head.html (link layout-shell.css)

Out of scope (v1)

• tools/* standalone UIs
• Design system preview HTML pages

[lamontacrook]

Implementation started on branch (local): layout shell (styles/layout-shell.css), body.layout-side-nav via decorateLayout() in scripts/ak.js (opt out with meta name="nav-layout" content="top"), sidenav styles + JS in blocks/header/.