matomo-org / matomo-org/developer-documentation

Improve Mobile Navigation UX for Sidebar Menu

Open
#856 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
58
Forks
88
Avg merge
6d 3h
Merged PRs (30d)
13

Description

### 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.

Image

### 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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no files, tests, or entry points. Reproduce the sidebar flow on a mobile device, inspect the documentation site's navigation implementation, and choose a single approach that makes the selected page content immediately visible; verify the result by repeating the listed steps.

Written by the indexing model from the issue text.

Assessment

Domain
documentation, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.