Repository navigation
docs: improve mobile layout and small-screen readability - #81
Merged
Merged
Conversation
Adds a hamburger drawer to the masthead so the nav stops overflowing on phones, converts the sidebar TOCs to collapsible <details> elements that stay open on desktop, and tightens type/spacing below 720 px. For the Python Quick Start (and any future multi-section walk-through), adds a prev/next section pager generated from the existing sections array and a floating back-to-top button — both shown only at ≤ 900 px where the sidebars collapse and inline navigation aids matter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Documentation site receives a mobile-friendly refresh: the masthead gains a hamburger drawer, sidebar TOCs collapse into <details> disclosures on narrow viewports, and global type/spacing is tightened ≤ 720 px. A reusable section-pager (auto-derived from sections/currentSection) and a fade-in back-to-top button are added for small screens.
Changes:
- Convert sidebar TOCs (
.page-toc,.page-sections,.api-toc) from<aside>to<details class="side-nav">, with an inline script forcing them open at ≥ 901 px and a chevron + collapsed default on mobile. - Add a mobile nav hamburger drawer, mobile typography/spacing tweaks, footer stacking, and a back-to-top floating button (shown ≤ 900 px past ~1.2× viewport scroll).
- Add an automatic prev/next section pager rendered by
Base.astrowhensections+currentSectionare present.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| docs/src/styles/global.css | New CSS for section pager, back-to-top, side-nav disclosure, hamburger drawer, and small-screen typography/spacing. |
| docs/src/pages/api.astro | Wrap API TOC <aside> in a <details class="api-toc side-nav"> with a summary so it collapses on mobile. |
| docs/src/layouts/Base.astro | Compute prev/next sections; emit hamburger button, section pager, back-to-top; add inline JS to sync disclosure open-state and drawer interactions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+216
to
+222
| const sideNavs = document.querySelectorAll("details.side-nav"); | ||
| function syncSideNavs() { | ||
| for (const d of sideNavs) { | ||
| if (mq.matches) d.setAttribute("open", ""); | ||
| else d.removeAttribute("open"); | ||
| } | ||
| } |
Comment on lines
+244
to
+248
| if (target && target.tagName === "A") setOpen(false); | ||
| }); | ||
| // Reset state when crossing the breakpoint. | ||
| const mqNav = window.matchMedia("(min-width: 721px)"); | ||
| mqNav.addEventListener("change", () => setOpen(false)); |
|
Disable pointer events on the side-nav summary above the mobile
breakpoint so a stray click on desktop can't collapse the sidebar TOC,
and re-enable them inside the mobile media query. Also use
`closest("a")` for the nav-link delegation so it stays correct if a
link ever wraps an icon.
Addresses Copilot review comments on #81.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.brand-suband tightens masthead padding below 720 px..page-toc,.page-sections, and.api-tocfrom<aside>to<details class="side-nav">so they collapse on mobile. An inline script forces them open at ≥ 901 px, preserving the desktop look; on mobile the summary becomes a tappable disclosure with a chevron, and the redundant right-hand "On this page" TOC is hidden ≤ 900 px since the left "Sections" rail already lists everything..shell/ hero /pre/ titleblock padding, atom-cloud faded to 55 %). Footer stacks at ≤ 540 px; theme-toggle buttons grow to a 34 × 30 px tap target.sections+currentSectionprops — currently used by the Python Quick Start. Placeholder column keeps the grid balanced on the first/last sections.max(viewportHeight × 1.2, 600 px)and smooth-scrolls to the top, returning focus to the brand for keyboard users.Test plan
/on a phone-width viewport (≤ 720 px): brand-sub hidden, hamburger toggles a stacked drawer, theme toggle reachable inside the drawer./quickstart/python,/quickstart/python/tableau,/quickstart/python/next-steps: section pager renders with the correct prev/next labels (and an empty cell for the first / last section)./develop: scroll past ~1.2× the viewport on a phone-width window — back-to-top fades in; tapping it smooth-scrolls to the top./api: API TOC opens on desktop, collapses on mobile; filter + lang toggle still work inside the disclosure.🤖 Generated with Claude Code