Skip to content

[Discovery] Combine Projects, Groups, and More into one menu

Proposal

Combine items in Project, Groups, and more into one menu called Menu

  • If the user has permission to see the admin area, then the Admin link would be in the dropdown.
  • The list of projects/groups is currently uses the logic of "frequently visited". Independent to this issue is an effort to change this list to "recently visited". #301144 This issue assumes that "recently visited" has been implemented and thus the labels of the list reflect this assumption.

Figma: https://www.figma.com/file/nQOkDbOOKl35uE7C1Y2C9Q/Simplify-the-menu-options-for-project-groups-and-more?node-id=102%3A609

Top nav menu prior to change
Default Not signed in
image image
Projects Groups More
image image image

Step 1 - Consolidate current menu items into a singular flyout menu

  • Add new icon for object menu (icon issue needs to be created)
  • "Menu" is label for this consolidated menu
  • There is a chevron signifier to show the affordance that this is a dropdown when clicked
  • "Switch to ..." is the tooltip on hover
  • Consolidate the 3 project creation links into one New project/repository which links to https://gitlab.com/projects/new

image

Previous design

Before March 31 - Design direction with 3 create project links

image

Each product area flyout menu

This is what the flyout menu looks like for each product area.

Projects Groups Milestones Snippets Activity Environments Operations Security Analytics Admin Other (ie. User Settings)
image image image image image image image image image image image

Step 2 - Update the mobile navigation to reflect the new flyout menu structure

  • To allow for space with the notifications when the mobile menu is open, we will hide the label when the menu is open

image

🕹 Prototype: https://www.figma.com/proto/nQOkDbOOKl35uE7C1Y2C9Q/Simplify-the-menu-options-for-project-groups-and-more?node-id=107%3A332&viewport=802%2C397%2C0.37290602922439575&scaling=min-zoom

Future steps (not in 14.0 MVC)

Step 3 - Add notifications to the mobile navigation (NEEDS REFINEMENT) #325895 (closed)
  • Change rules around top nav to limit space for logo so that the notifications and menu label can be placed simultaneously.

image

Figma: https://www.figma.com/file/nQOkDbOOKl35uE7C1Y2C9Q/Simplify-the-menu-options-for-project-groups-and-more?node-id=102%3A609

Step 4 - Document usage for list/actions in flyout menu #325896 (closed)

To be added in a separate issue related to the Pajamas design system project.

image

Step 5 - Document usage of empty states in flyout menu for areas without lists #325897 (closed)

To be added in a separate issue related to the Pajamas design system project.

image

Based on these steps we can provide enough guidance that other teams looking to leverage the flyout menu to increase usage with lists or awareness through empty states.

Changelog

  • 2021-05-32: Update label from Create new project to New project/repository. Update label from Create new group to New group. #301143 (comment 585799327)
  • 2021-04-27: Add screenshots of what the current menus look like in the Proposal area
  • 2021-04-26: Update screenshots of each area's flyout menu
  • 2021-04-19: Clean up mobile designs (HR, chevrons, admin icon)
  • 2021-03-31: Update mockups to have one link to create new project instead of 3 items
  • 2021-03-17: Clean up of areas in the issue description that referenced a dynamic label
  • 2021-03-12: Consolidated menu will have label of "Menu" with tooltip "Switch to..." #301143 (comment 527734264)
  • 2021-03-08: Updated "label" to be a dynamic label based on area in product #301143 (comment 523936938)
  • 2021-03-02: Mobile menu and the add new button was missing #301143 (comment 519551890)
Edited by Michael Le