Add mobile framework and version selector to doc pages#367
Open
raffaelefarinaro wants to merge 1 commit into
Open
Add mobile framework and version selector to doc pages#367raffaelefarinaro wants to merge 1 commit into
raffaelefarinaro wants to merge 1 commit into
Conversation
On mobile there was no visible way to switch frameworks: the only path was the easy-to-miss 'Back to main menu' link in the hamburger, behind an entry labeled 'SDKs', and its links dropped users on the add-sdk page instead of keeping the page they were reading. - Add an in-page framework + version selector (homepage pill style) at the top of doc pages, shown below 768px. Switching keeps the current page and version; Xamarin entries only appear on legacy versions. - On tablets (768-996px) show the existing navbar version/framework dropdowns next to the search instead of the in-page selector. - Extract the desktop dropdown's path-preserving link logic into a shared useFrameworkItems hook; the mobile SDKs dropdown now also keeps the current page when switching. - Hide breadcrumbs and the 'Back to main menu' button on mobile; the sidebar already highlights the open page. - Reduce mobile doc content top padding (48px -> 16px). - Fix homepage framework selector dropdown being painted over by the SkillsCallout (z-index).
ilber
reviewed
Jun 11, 2026
| isActive: v === activeVersion, | ||
| })); | ||
|
|
||
| const versionTag = (category: string) => ( |
Member
There was a problem hiding this comment.
getVersionMainDoc can return undefined here if a version has no doc matching mainDocId, and .path would throw. The ?? only guards the first operand — maybe (... ?? getVersionMainDoc(v))?.path ?? "/".
ilber
reviewed
Jun 11, 2026
| <span className={`version-tag version-tag-${category}`}> | ||
| {TAG_LABEL[category]} | ||
| </span> | ||
| ); |
Member
There was a problem hiding this comment.
v comes from useVersions() and activeVersion from useActiveDocContext() — different hooks, so reference equality may never hold and the active version highlight won't show. Compare v.name === activeVersion?.name instead.
ilber
reviewed
Jun 11, 2026
| /> | ||
| ))} | ||
| {effectiveItems.map((childItemProps, i) => { | ||
| const { sidebarId, ...rest } = childItemProps; |
Member
There was a problem hiding this comment.
Worth a short comment on why sidebarId is dropped here while type stays "docsVersion" (so the explicit to wins). It's the subtlest behavior change in the PR and the desktop path keeps it.
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
2 participants
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.
Why
Feedback from Jenny: on mobile it's difficult or impossible to switch frameworks without going back to the homepage. We deep-link to framework-level pages from the corp site and ~50% of that traffic is mobile.
The only existing path was the easy-to-miss ← Back to main menu link in the hamburger, behind an entry labeled SDKs (nothing says "framework"), and its links dropped users on the Installation page instead of keeping the page they were reading.
What
Phones (<768px) — an in-page framework + version selector, styled like the homepage one, at the top of every doc page (above "On this page"):
/sdks/android/id-capture/intro→/sdks/ios/id-capture/intro); pages that don't exist in the target framework fall back via the existing NotFound redirect, same as desktop today.Tablets (768–996px) — the existing navbar version/framework dropdowns are shown next to the search (they were CSS-hidden below 997px); the in-page selector is hidden in this range. Dropdowns open on tap.
Desktop (≥997px) — unchanged.
Also:
useFrameworkItemshook (theDropdownNavbarItemoverride shrinks by ~190 lines, identical behavior). The mobile SDKs dropdown entries now also keep the current page.src/theme/DocItem/Layoutis a faithful copy of the stock component with one added line (selector above the mobile TOC).Notes for reviewers
navbar-sidebar.scssif we want them back.Testing
yarn typecheckandyarn buildpass.