Skip to content

Hide global nav on mobile devices during initial page load

Sarah German requested to merge 1687-mobile-menu into main

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.

Screenshots, screen recordings, or links to review app

Compare how the global nav (left sidebar) loads at small and large widths:

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.

  1. [] Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Browse a few pages at small-width.
  3. 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.

Closes #1687 (closed)

Edited by Sarah German

Merge request reports