---
estimated_steps: 12
estimated_files: 3
skills_used: []
---

# T01: Relocate ToC to sidebar and restyle with accent bar

Move the TableOfContents render from inside technique-columns__main (inside technique-prose) to the top of technique-columns__sidebar. Restyle: remove CSS counters, remove card background, add left accent bar, rename heading to 'On this page', add hover background states on links.

This slice owns R040 (Table of Contents Modernization). The ToC currently renders at line 425 of TechniquePage.tsx inside the v2 prose section. It needs to move to the sidebar div (line 470). Only render ToC in sidebar for v2 format pages.

CSS changes in App.css (lines 2034–2108):
- Remove counter-reset, counter-increment, and ::before pseudo-elements
- Remove background/border card styling
- Add border-left: 2px solid var(--color-accent) accent bar
- Add hover background: var(--color-accent-subtle) on links
- Change .technique-toc__title text to be set by the component (not CSS)

Component changes in TableOfContents.tsx:
- Change heading from 'Contents' to 'On this page'
- Change <ol> to <ul> (no ordered list needed without counters)

Layout note: The sidebar is already position: sticky; top: 1.5rem. Placing ToC at the top of the sidebar makes it sticky automatically.

## Inputs

- ``frontend/src/pages/TechniquePage.tsx` — current layout with ToC inside main column at line 425`
- ``frontend/src/components/TableOfContents.tsx` — current component with 'Contents' heading and <ol> lists`
- ``frontend/src/App.css` — ToC styles at lines 2034–2108 with CSS counters`

## Expected Output

- ``frontend/src/pages/TechniquePage.tsx` — ToC moved to sidebar div, only for v2 pages`
- ``frontend/src/components/TableOfContents.tsx` — heading renamed, ol→ul, ready for active state props`
- ``frontend/src/App.css` — ToC styles: no counters, accent bar, hover backgrounds`

## Verification

cd frontend && npm run build 2>&1 | tail -5 && echo 'Build OK'
