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

• Requirements (issue)
• Tasks (epic)
• Full Context Spike MR (permanent draft)
• All MR parts ...

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

Projects	Groups	More

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
  • For Groups, the 3 creation links link into one New group which links to https://gitlab.com/groups/new

Previous design

Before March 31 - Design direction with 3 create project links

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)

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

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

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.

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.

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)