Revamp mobile navigation

[nolannbiron]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: ea170d2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
gitbook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Summary of the deployments:

Version 1

Version	URL	Status
Latest commit	https://a2d71eb5.gitbook-open.pages.dev	✅
PR	https://pr3282.gitbook-open.pages.dev	✅

Version 2

Version	URL	Status
Vercel	https://gitbook-v2-h3nrvzn4a-gitbook.vercel.app	✅
Cloudflare	https://82a1b3b8-gitbook-open-v2-preview.gitbook.workers.dev	✅

Test content

Site	v1	2v	2c
GitBook	https://a2d71eb5.gitbook-open.pages.dev/gitbook.com/docs	https://gitbook-v2-h3nrvzn4a-gitbook.vercel.app/url/gitbook.com/docs	https://82a1b3b8-gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs
E2E	https://a2d71eb5.gitbook-open.pages.dev/gitbook.gitbook.io/test-gitbook-open	https://gitbook-v2-h3nrvzn4a-gitbook.vercel.app/url/gitbook.gitbook.io/test-gitbook-open	https://82a1b3b8-gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.gitbook.io/test-gitbook-open

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
customers-v1 (Inspect)	⚠️ Changes detected (Review)	16 changed	Jun 9, 2025, 4:16 PM
customers-v2 (Inspect)	⚠️ Changes detected (Review)	87 changed	Jun 9, 2025, 4:18 PM
default (Inspect)	⚠️ Changes detected (Review)	27 changed	Jun 9, 2025, 4:19 PM
v2-cloudflare (Inspect)	⚠️ Changes detected (Review)	20 changed, 8 removed, 1 failure	Jun 9, 2025, 4:22 PM
v2-vercel (Inspect)	⚠️ Changes detected (Review)	20 changed, 8 removed, 1 failure	Jun 9, 2025, 4:23 PM

[SamyPesse]

I think it can negatively impact perfs as it means the TOC will be rendered twice; we have spaces with thousands of pages, which can result in a big HTML chunk just for mobile

[nolannbiron]

@SamyPesse Probably not the sexiest approach, but this way we can preserve the initial HTML (desktop TOC) and switch to the Sheet TOC for mobile, so no duplicate

I’m not a big fan of relying on useIsMobile, but given that we’re passing a context props (not serializable) to a lot of components, it’s tricky to implement a clean client-side solution without breaking things

I still think it's a good improvement and it won't change anything on desktop

[gregberge]

I tested it, the animation is not great and the backdrop is blinking and disappearing.

It's still need to be polished before being ready to be merged.

CleanShot.2025-06-12.at.21.48.57.mp4

[gregberge]

Why do we have this logic in the MobileMenuButton and not elsewhere? A Provider or something like that?

[gregberge]

You will re-render the button when the pathname change for nothing.

[gregberge]

Why do we need that. I don't understand why we don't keep the same element and we just switch its position to absolute or something like that? In the app, in mobile I use another layout but we could keep the same component like in desktop actually (I think I will refactor it at some point). I think we could do something smarter here.