Repository navigation
Compact mobile chrome for the docs pages - #1357
Merged
Merged
Conversation
|
The deployments were removed when this pull request closed. Reopening it deploys again at the same address. |
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
2 times, most recently
from
September 28, 2026 11:47
5196eba to
39d90e4
Compare
tmashara
changed the title
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
4 times, most recently
from
September 29, 2026 11:42
92aa795 to
d104f2b
Compare
tmashara
marked this pull request as ready for review
September 29, 2026 11:48
tmashara
commented
Sep 29, 2026
| "plugins": ["stylelint-order"], | ||
| "rules": { | ||
| "alpha-value-notation": "number", | ||
| "length-zero-no-unit": [true, { "ignore": ["custom-properties"] }], |
Contributor
Author
There was a problem hiding this comment.
to allow --section-bar-top: 0px
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
2 times, most recently
from
September 29, 2026 12:41
897f7e6 to
dc90eb3
Compare
tmashara
marked this pull request as draft
September 29, 2026 13:32
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
from
September 29, 2026 13:35
dc90eb3 to
8928cbc
Compare
tmashara
marked this pull request as ready for review
September 29, 2026 13:49
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
from
September 29, 2026 16:15
8928cbc to
11a093e
Compare
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The mobile TOC has keyboard-focus and empty-state regressions that should be resolved before approval.
Review effort: Balanced
Findings: 2
Open (2)
What changed in this PR
Introduces compact, scroll-aware mobile navigation for documentation pages.
Changes:
- Adds collapsible mobile headers, side navigation, and “On this page” dropdown.
- Moves mobile breadcrumbs and simplifies search.
- Refactors header controls and related legacy assets.
| File | Description |
|---|---|
.stylelintrc |
Allows units on zero-valued custom properties. |
public/docs/css/inkeep.css |
Styles mobile search as an icon. |
public/docs/js/learn/left-sidebar.js |
Removes legacy sidebar behavior. |
public/docs/js/position-feedback-widget.js |
Targets the revised top bar. |
public/docs/js/use-custom-header-checkout-link.js |
Removes obsolete checkout-link customization. |
src/components/InkeepSearch/InkeepSearch.astro |
Compacts mobile search dimensions. |
src/components/chrome/Breadcrumb.astro |
Adds responsive breadcrumb variants. |
src/components/chrome/DocsNavToggle.astro |
Simplifies toggle styling. |
src/components/chrome/GetStartedButton.astro |
Extracts the header CTA. |
src/components/chrome/Hamburger.astro |
Adds an animated menu control. |
src/components/chrome/Header.astro |
Adds compact, scroll-hiding mobile behavior. |
src/components/chrome/LeftSidebar.astro |
Adds independent submenu controls. |
src/components/chrome/NavItem.astro |
Separates links from expansion buttons. |
src/components/chrome/PageNav.astro |
Converts the TOC into a mobile dropdown. |
src/components/chrome/TocToggle.astro |
Adds the mobile TOC trigger. |
src/icons/chrome/hamburger.svg |
Removes the replaced icon asset. |
src/layouts/DefaultNewLayout.astro |
Passes header scroll behavior through. |
src/layouts/NewDocsLayout.astro |
Integrates the redesigned mobile chrome. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
2 times, most recently
from
October 5, 2026 11:50
14a15e1 to
9dcc037
Compare
losrebellos
requested changes
Oct 5, 2026
losrebellos
left a comment
losrebellos
left a comment
Contributor
There was a problem hiding this comment.
- Not sure it expected: when clicking on one of the bottom
on this pagelink, the top nav disappear:
And when click on one of the topon this pagelink, the top nav reappear
Same on direct link with#... It seems to be acting as a scroll behaviour. - Is the
What's newbutton hover colour correct? The blue seems to be super dark. - When a page has no
on this pagelinks, we should hide theh2, see here.
Contributor
Author
|
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
2 times, most recently
from
October 5, 2026 13:28
76308fd to
5d96bc5
Compare
losrebellos
self-requested a review
October 5, 2026 13:36
losrebellos
approved these changes
Oct 5, 2026
Phone-only (below lg) changes, mirroring the marketing site's docs-mobile-header-prototype branch: - Site header shrinks to 56px, shows a `Metabase | Docs` mark linking to /docs/latest/, and hides on scroll-down / returns on scroll-up. The "Get started" button is 36px with an 8px radius; the burger no longer paints a hover background. - The section bar is a fixed 40px strip spanning the viewport: menu toggle, search as a bare magnifier, and an "On this page" trigger with a chevron that flips when open. - Breadcrumbs leave the bar and render as a plain slash-separated trail above the content; the Home crumb is a house icon in both trails. - "On this page" opens a bottom sheet instead of an in-flow row. - In the left nav, links always navigate; a separate chevron button toggles a branch. Desktop is untouched apart from the hub label after the wordmark and the nav chevron becoming a button. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The section bar and header now use the article's 20px gutter, with the toggle buttons' padding hanging outside it, so the burger, wordmark, breadcrumbs, content and "On this page" share one left and right edge. The phone breadcrumb items are centred vertically so the Home icon sits on the text's midline. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The legacy sheet positions the divider absolutely with a 3px nudge for the chevron image, which left the slash sitting above the text. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…back for on this page control
tmashara
force-pushed
the
docs-mobile-header-prototype
branch
from
October 5, 2026 17:11
5d96bc5 to
ca481f2
Compare
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.
Prototype for the #website-design thread
website PR
changes
preview https://docs-pr-1357-metaboat.vercel.app/docs/latest/
docs.mov