Docusaurus: Top nav could be pushed to the next row in some screen width

[tomchen]

🐛 Bug Report

If the top nav bar has too many items / too much text, it could be pushed to the next row on tablet / old desktop screen that is around 1024px wide, which is wider than the threshold the top nav bar is shrunk into a hamburger button.

Have you read the Contributing Guidelines on issues?

Yes

Real-life Demo

Width: 1024px

https://v2.docusaurus.io/docs/

https://reactnative.dev/docs/getting-started

https://react-redux.js.org/introduction/quick-start

https://redux.js.org/introduction/getting-started

(Good for Redux, it looks like they fixed it. However, there is a minor problem: the viewport is not fit and is wider than the screen, showing the horizontal scrollbar)

Comment

Maybe get the the top bar's real width after it is loaded, then make some calculation and change the threshold screen width the top nav is shrunk?

Your Environment

• Docusaurus version used: V2
• Environment name and version: Chrome 86 and Firefox 82
• Operating system and version: Windows 10 Desktop

[slorber]

Yes this is an issue we should figure out. The simplest solution for now is to reduce the number of navbar items 😅 (or label lengths, we mostly have the issue due to the "unreleased" label)

Maybe get the the top bar's real width after it is loaded, then make some calculation and change the threshold screen width the top nav is shrunk?

Any JS-based solution would produce flickering on page load, as the layout will update just after React hydration, which wouldn't be a good UX

[Simek]

Hi @tomchen, after the latest CSS tweaks the React Native website should now look like this on your device:

Please confirm that the overflow issue has been fixed for you and remember to reset the local cache (Ctrl+Shift+R). 🙂

[tomchen]

Yes this is an issue we should figure out. The simplest solution for now is to reduce the number of navbar items 😅 (or label lengths, we mostly have the issue due to the "unreleased" label)

Maybe get the the top bar's real width after it is loaded, then make some calculation and change the threshold screen width the top nav is shrunk?

Any JS-based solution would produce flickering on page load, as the layout will update just after React hydration, which wouldn't be a good UX

@slorber Actually a JS-based solution should work with CSS, it would fix the problem only when there is a problem: the vast majority of the users with a non tablet screen would be unaffected, the tablet users who have the problem, would indeed see the flickering before seeing the correct page, but "flickering then seeing the correct page" is better than showing the ugly misplaced top nav menu. And it's SPA, users only see the flickering once at the beginning, not once "every page".

The solution could be something like:
If document.getElementsByClassName('navbar__items--right')[0].getBoundingClientRect().top is 7.5, 8, 8.5 or something, then it's all good. If it's 42, 45 or something that big, then the top nav should be shrunk and show a hamburger button.

Docusaurus can also leave a threshold width variable or something in config file that's strongly recommended to be set by Docusaurus user. Yes, this is always better and reliable than the JS solution. The flickering runtime JS solution is just a fail-safe.

[tomchen]

Hi @tomchen, after the latest CSS tweaks the React Native website should now look like this on your device:
...
Please confirm that the overflow issue has been fixed for you and remember to reset the local cache (Ctrl+Shift+R). 🙂

@Simek Yes thank you, React Native website is good now.