Skip to content

Implement hamburger menu on desktop #14937

@carolromero

Description

@carolromero

Is your feature request related to a problem?

The current navigation uses a mega-menu layout that combines both the main navigation menu and breadcrumbs in a single structure. This design creates confusion and makes difficult to manage navigation consistently across different sections and screen sizes, and does not scale well when more navigation items are added.

Describe the solution you'd like

Introduce a hamburger menu for desktop viewports that consolidates navigation items into a collapsible panel. This menu would behave similarly to the mobile version:

  • Navigation links are hidden behind a hamburger icon.
  • Clicking the icon opens a side panel showing the navigation links.
  • The menu closes when the user clicks outside it or clicks the close icon.
  • The hamburger icon should be placed on the right side of the header, next to the language selector and account menu.

The mobile version of this menu already exists and can serve as the baseline implementation.

Mock-ups / Prototype
Figma file

Additional context

This implementation supports the broader redesign and simplification of the header, which includes removing some links like Help or Activity, adding a language selector, and creating a more responsive layout.

Does this issue impact users' private data?

No, it does not involve processing personal data.

Acceptance Criteria

  • Given I visit the platform on a desktop screen, when the header loads, then I see a hamburger menu icon instead of inline navigation links (they will be removed in a separated task).
  • Given I click the hamburger icon, then a menu panel opens displaying the full list of navigation links.
  • Given I click outside the panel or click close, then the panel closes.
  • Given the menu is closed, then I can open it again using the same icon.
  • Given I navigate through the links inside the hamburger menu, then I am redirected to the corresponding section.
  • Given I resize the browser from desktop to mobile or vice versa, then the menu adapts accordingly without visual glitches.

Metadata

Metadata

Projects

Status

Merged

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions