User story
As a mobile user, I want easy access to the TOC through a sticky header
Requirements
Implement a sticky header that includes:
- an optional (only for those that have a TOC) toggle to turn a TOC overlay on/off
- a heading that truncates at 2 lines
- an optional subheading (wikidata description)
- an optional edit button
This ticket is about both the sticky header implementation & TOC container design & placement; it is not about implementing logic the figure out when to update heading data on scroll.
Design
https://phabricator.wikimedia.org/T410325#11413314
Acceptance criteria
- This is no button on pages that have no TOC
- There is a sticky header of the page that matches design
- There is a TOC overlay that matches design
- The TOC button toggles the TOC overlay (open/close)
- Headings longer than 2 lines are truncated
- The "subtitle" (short description) may or may not be present
- The edit link may not be present
- Clicking the edit link takes you to edit the (correct section in) the article
- The sticky header has a consistent height
- Nice to have: both button and TOC state accurately reflect url hash (#toc) and update as it changes