- **[Requirements (issue)](https://gitlab.com/gitlab-org/gitlab/-/issues/301143)** - [Tasks (epic)](https://gitlab.com/groups/gitlab-org/-/epics/5645#tasks) - [Full Context Spike MR](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56587) (permanent draft) - [All MR parts](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56587#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". https://gitlab.com/gitlab-org/gitlab/-/issues/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 <details> <summary>Top nav menu prior to change</summary> | Default | Not signed in | | ------ | ------ | |  |  | | Projects | Groups | More | | ------ | ------ | ------ | |  |  |  | </details> ## 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 <details> <summary>Before March 31 - Design direction with 3 create project links</summary>  </details> #### 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) <details> <summary>Step 3 - Add notifications to the mobile navigation (NEEDS REFINEMENT) https://gitlab.com/gitlab-org/gitlab/-/issues/325895</summary> - 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 </details> <details> <summary>Step 4 - Document usage for list/actions in flyout menu https://gitlab.com/gitlab-org/gitlab/-/issues/325896</summary> To be added in a separate issue related to the Pajamas design system project.  </details> <details> <summary>Step 5 - Document usage of empty states in flyout menu for areas without lists https://gitlab.com/gitlab-org/gitlab/-/issues/325897</summary> To be added in a separate issue related to the Pajamas design system project.  </details> 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`. https://gitlab.com/gitlab-org/gitlab/-/issues/301143#note_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..." https://gitlab.com/gitlab-org/gitlab/-/issues/301143#note_527734264 - 2021-03-08: Updated "label" to be a dynamic label based on area in product https://gitlab.com/gitlab-org/gitlab/-/issues/301143#note_523936938 - 2021-03-02: Mobile menu and the add new button was missing https://gitlab.com/gitlab-org/gitlab/-/issues/301143#note_519551890