docs(nav): add Resources and Support menu tabs, restyle tab bar to design pills - #172
Conversation
…sign pills Docs 3.0 QA: add the Resources and Support dropdown tabs from the new header design (their menus absorb the old global sidebar anchors), separate them from the page tabs with a hairline divider, and restyle the tab bar to the design language: ink labels, black pill for the active tab (inverted in dark mode), no underline indicator, search entry as a quiet bordered pill.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
|
Series (Docs 3.0 QA round 2, splitting #170 — all six are independent and merge in any order): #171 alignment · #172 header tabs · #173 footer · #174 chat launcher · #175 World Tech links · #176 sidebar selected state. Screenshots live on the assets-only branch |
Collapse the theme's two-row header into the design's floating 84px pill at >=1440px: logo left, adjacent pill tabs centered (752px row per the mock), compact search pill and CTA right, 63px side margins at the 1728px frame so the logo shares the 96px page gutter. Tab pills tighten to the design metrics (zero gap, 10px padding, 14px on the active pill). Between 1440-1600px the theme toggle steps aside; below 1440px the two-row layout from the previous commit remains.
|
Upgraded per QA feedback: this PR now implements the full single-row floating pill header at desktop widths (≥1440px) instead of only the two-row fallback — logo/tabs/search/CTA in one 84px rounded bar matching the mock's metrics (752px tab row, 63px margins at 1728px, logo on the 96px gutter). The after-screenshot in the description is retaken from this branch at the 1728px design frame. Below 1440px the previous two-row styling remains as the fallback. |
The gap between the world mark and 'Developers' in the combined logo SVGs rendered ~47% wider than the mock (12.6px vs 8.6px at the header scale). Shift the wordmark 6.1 viewBox units left in both variants (canvas 233 -> 226.9) so the gap ratio lands on the design's 5.16%, and keep the pill-header logo block at the mock's 166px width.
Hide the Developer Portal CTA and the theme toggle at pill widths (>=1440px): the design's header carries only the Search and Ask pills. Developer Portal joins the Resources menu so it stays one click away; the theme still follows the system preference, and both elements remain in the sub-1440 layouts and mobile nav.
…ible The hosted header carries a wide Search + Ask Assistant cluster that the absolutely-centered tab row painted under at sub-1728 widths (tabs were hidden behind the pills). Flatten the theme's two-row scaffolding with display:contents so logo, tabs, and the cluster are items on ONE flex line: auto margins center the tabs in the free space and the layout can never overlap regardless of cluster width. Also style the hosted Ask Assistant entry as the design's Ask pill and compact the search entry by rule (the prod cluster lacks the justify-center class the previous selector keyed on).
The pill's side margins jumped from 63px to 24px below 1600px, so the bar visibly widened as the window shrank. Use the design frame's ratio (63/1728 per side, 7.3vw total) continuously, capped at the 1602px design width — same proportions at every desktop size, and the logo stays on the 96px gutter at the 1728px frame.
Takaros999
left a comment
Takaros999
left a comment
There was a problem hiding this comment.
Reviewed the current diff, surrounding source, checks, and hosted preview. No blocking findings. Preview verification was per PR; the combined merged layout was not tested.
2 participants
Part of the Docs 3.0 QA round 2 series
Change
Implements the new header design — the single-row floating pill — plus the Resources/Support menus:
menu) tabs, separated from the page tabs by the design's hairline divider:At pill widths the right side matches the mock exactly — Search plus (on the hosted site) the Ask Assistant pill, the design's "Ask AI". The Developer Portal CTA and the theme toggle are hidden there: Portal moves into the Resources menu, the theme follows the system preference, and both stay in the sub-1440 layouts and mobile nav. "Explore Integrations" is likewise hidden at pill widths (Ecosystem covers it in Resources and the footer). Remaining known deviation: the search pill says "Search…" (theme string). The dropdowns' contents are a best-guess mapping (the design shows them closed).
Header
Before:
After (hosted preview at the 1728px design frame — real Ask Assistant pill; the header is one flex line, so the hosted Search/Ask cluster can never overlap the tabs):