== Background
This will be the first part of setting up the new, persistent version of the table of contents
- [[ https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Repository/Sticky_Header_and_Table_of_Contents_User_Testing | Objectives and research ]]
- [[ https://di-toc-phase2.web.app/Hokusai | Design prototype ]] (for design experimentation)
- [[ https://en-toc.wmcloud.org/wiki/Main_Page | User testing prototype ]] (shown to end-users)
- User testing prototype results
== User story
As a reader, I want the ability to navigate to different sections in the page.
== Initial feature set
==== Modified layout to accommodate new ToC
- The sidebar area will have to be widened to fit the longer text of the new ToC.
- The sidebar background colour should be changed to transparent to improve the transition between the ToC and sidebar.
==== new ToC UI behaviour
**On scroll**
The new ToC will be positioned near the top of the page when the user is at the top of the page. As the user scrolls down the page, the ToC will:
- "stick" to the top of the page so that it remains visible while scrolling.
- When a user "enters" an article section, the ToC will:
- Highlight the ToC link corresponding to the current section
- If the current section is a sub-section, the ToC will highlight the top-level section link as well.
**On click**
When clicking on a section link in the ToC:
- The page will be scrolled to the corresponding heading (instantly)
- The clicked ToC link will be highlighted
- If the clicked ToC link is a sub-section, the corresponding top-level link will also be highlighted
- Any previously highlighted links will be un-highlighted
==== Accessibility & semantic considerations
- The new ToC should be accessible via keyboards and assistive technologies.
- In the accessibility tree, the ToC should be a labeled as a navigational landmark
- It should be a <nav> element
==== Back-end (presentation) Logic
When determining whether or not to show the new ToC, the same rules that govern the current ToC should be applied. If the ToC is currently hidden via magic words like `__NOTOC__` or by other means, it should remain hidden in this update.
==== Edge cases
**Very long ToC**
When a ToC is longer than the viewport, then the ToC itself should be scrollable. On a very long ToC, when highlighting a section link that is outside the viewport, the ToC should change its scroll position in order to bring the active link into view.
== Acceptance criteria
[] Allow the table of contents to appear persistently on the left side of the page
[] Allow the table of contents to contain links that navigate to the corresponding section within the ToC
Note: this tasks assumes that all sections within the ToC are uncollapsed. We will be building out the collapsible functionality in a separate ticket