Improve Mobile Navigation UX for Sidebar Menu

[tsteur]

Problem

When viewing the Matomo Developer Docs on a mobile device, navigating via the sidebar menu leads to a confusing user experience:

1. A user taps a sidebar item—for example, "Distributing your plugin".
2. The page reloads and the selected menu item becomes active.
3. Because the reload is very fast and the menu is still visible, it’s not obvious to the user that the new page has already loaded.
4. The actual page content starts far below the sidebar, requiring significant scrolling before the user sees any change on the screen.

This makes it feel as though nothing happened after tapping the link, and the user may think the tap didn’t register.

Expected / Desired Behavior

After selecting a sidebar link on mobile:

The user should immediately see the page content, not the sidebar again at the top.

Navigation should provide a clear visual indication that the user has moved to a new page.

Possible Solutions

Any of the following could improve UX:

• Auto-jump to the top of the main content area after navigating.
• Collapse or hide the sidebar automatically once a menu item is selected.
• Scroll the page to the content anchor on load (#content or similar).
• Use a different mobile navigation pattern, e.g. a slide-out drawer that closes after selection.
• Show a subtle transition or loading indicator before content appears.

Why This Matters

Mobile users may miss that the page has changed, leading to confusion and unnecessary scrolling. Improving this flow will make the documentation feel much more responsive and intuitive on smaller screens.

Steps to Reproduce

• Open developer.matomo.org on a mobile device.
• Open the sidebar navigation.
• Tap "Distributing your plugin" (or another item).
• Observe that the sidebar remains at the top after reload, pushing the actual content far below.