Hide global nav on mobile devices during initial page load
What does this MR do and why?
- Moves global-navigation.js over to
content/frontend/navigation
. This allows us to use modern JS syntax and tools (like eslint) on this file. - Light refactoring to comply with our eslint rules now that we're enforcing them here
😄 - Adds a CSS class to hide the global nav while the page loads on small screens, and a line of JS to remove that class once the menu is fully initialized.
Why
We received feedback in our survey that it's annoying how the main menu covers up page content on mobile while the page loads. Give it a try on mobile, especially on a slower connection: it is indeed very annoying.
We're working elsewhere to improve frontend performance (e.g, !4105 (merged)), but a quick fix is to hide the menu on small screens until the toggle has initialized and the menu closes itself based on the media query.
- Closes #1687 (closed)
- Related #439 (closed)
Screenshots, screen recordings, or links to review app
Compare how the global nav (left sidebar) loads at small and large widths:
- Current site: https://docs.gitlab.com/runner/
- This MR: https://1687-mobile-menu.docs.gitlab-review.app/runner/
Tip: You can get a better feel for the problem if you use dev tools to throttle your connection speed to something like 3G.
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- [] Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
- Browse a few pages at small-width.
- The main menu should not obscure the content while the page loads.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Closes #1687 (closed)