Skip to content

Commit d63b8a4

Browse files
authored
Add adaptive left-hand TOC for GitHub Pages docs (#2)
### Motivation - Improve navigation for the docs by adding a persistent left-side table of contents that stays visually minimal until the user interacts with it. - Provide an accessible, touch-friendly alternative on small screens so the TOC can be toggled and doesn't rely on hover. ### Description - Add a slim fixed TOC shell and a `☰ Sections` toggle to `docs/index.html` and wrap content in a `.layout` container to reserve space for the sidebar. - Implement CSS for low-visibility bar placeholders (`.toc-bar`) that expand and reveal `.toc-label` on hover/focus and provide responsive styles for mobile (`.toc-toggle`, `.toc.is-expanded`). - Add runtime JS that enumerates each section's `<h2>`, auto-assigns stable IDs, builds `.toc-link` entries, and highlights the active section using `IntersectionObserver`. - Detect touch devices with a media query and switch to a collapsible TOC UX on touch devices so hover is not required. ### Testing - Ran `git diff --check` with no reported issues. - Served the docs via `python3 -m http.server 4173 --directory docs` and verified rendering in a headless browser. - Captured desktop and mobile screenshots using Playwright (Firefox) to validate the expanded and collapsed states, which completed successfully. - Attempted `xmllint --html --noout docs/index.html` but the `xmllint` binary was not available in the environment. ------ [Codex Task](https://chatgpt.com/codex/tasks/task_e_69a83e194cd483328c44d041b65a14ef)
1 parent 8bc5c1e commit d63b8a4

File tree

1 file changed

+389
-13
lines changed

1 file changed

+389
-13
lines changed

0 commit comments

Comments
 (0)