Skip to content

Part 1 - Setup for responsive top nav redesign [RUN AS-IF-FOSS]

Paul Slaughter requested to merge 301143-setup-top-nav-responsive into master

What does this MR do?

This MR sets up the CSS, HAML, and minimal JavaScript required for the responsive version of the top nav redesign.

What's in the upcoming MR?

  • Updating the view model
  • Updating the Vue components to actually render the responsive menu, reusing many of the already existing top nav components. This includes finishing the move of the "search" icon and "New..." dropdown.

Screenshots (strongly suggested)

How to test?

You will need to enable the feature flag :combined_menu to test the new behavior locally. Nothing should have changed with the feature flag off.

What should I look for?

  • With the feature flag on and responsive menu open, the "search icon" and "new dropdown" are now hidden.
  • With the feature flag on and responsive menu open, the GitLab instance logo is now visible.
  • With the feature flag on and responsive menu open, the "Placeholder for responsive top nav" is visible across various contexts like performance bar / system headers / Web IDE.
Description Feature.disable(:combined_menu) Feature.enable(:combined_menu)
Video 20210606_setup_responsive_ff_off 20210606_setup_responsive_ff_on
Large display ff_off_lg ff_on_lg
Medium display ff_off_md ff_on_md
Small display ff_off_sm_close ff_on_sm_close
Small display (responsive menu open) ff_off_sm_open ff_on_sm_open
Small display with performance bar and system header/footer (responsive menu open) ff_off_sm_margins ff_on_sm_margin
Web IDE (responsive menu open) ff_off_sm_ide ff_on_sm_ide

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Related to #301143 (closed)

Edited by Paul Slaughter

Merge request reports