Epic: Improve dashboard navigation

[gtsiolis]

Epic tasks

• Move Workspaces into top right nav, move Docs and Help under profile
• Soft-highlight all top nav elements to show context
• Split team context button with 2 active hover areas
• Move tabs for projects and teams down below the heading #10976
• Remove the sidebar menu and use the tabs for the admin dashboard #7879

Problem to solve

The dashboard navigation has grown over the last few months with the addition of new features like Teams & Projects as well as new features in the admin dashboard like Telemetry settings, etc.

This introduced new components like tabs and dropdowns that help scale the user interface options but also improve overall UX of the dashboard, etc. However, on the way the the additional navigation elements affected usability and more specifically user control[1] and consistency[2] across the product, see screenshots below as well as relevant issues: #7668, #7879, and #7716.

Projects (Personal Account)	Projects (Team)

Settings (Project)	Settings (Admin)	Users (Admin)

Workspaces (Personal Account)	Branches (Project)	Prebuild (Project)

Proposal

Opening this as a placeholder issue based on the relevant discussion[1][2] (internal). Cc @jldec

In the spirit of MVC (minimum viable change) here's the proposed changes within the scope of this issue.

Changelist:

1. Move workspaces as a global navigation menu item
2. Introduce a dropdown split button with two active areas.
3. Use the team scope dropdown left area to link to the default page of the scope, that is Projects.
4. Use the team scope dropdown right area to trigger the dropdown.
5. Use a darker active color to visually separate information hierarchy of the page contents below.
6. Move the tabs (Projects, Settings, etc) below the header section.
7. Re-structure admin menu to use tabs.
8. Move Help and Docs user menu inside the user dropdown as described in Epic: Low-friction dashboard form to collect feedback #7925 (comment).

Changes to consider:

1. Keep the active top-level menu item per page. ✔️
2. Use a narrower container width (optional).
3. Use more radius for the top-level navigation menu items. ✔️
4. Remove the separator border between the top-level navigation and the header title. (would help to show top-nav everywhere)
5. Consider moving the feedback menu inside the user dropdown.

Designs

Workspaces

Broad width	Narrow width

Team Hover (Left)	Team Hover (Right)	Team Active

Project	Prebuild	Admin

See design specs.

[gtsiolis]

In the spirit of questioning the proposed designs above, here're some screenshots side-by-side of the new navigation with no, soft, and hard highlight of the active menu on a real page like the Workspaces list which also contains a primary action button. Cc @jldec @svenefftinge

No highlight	Soft highlight	Hard highlight

[gtsiolis]

I've updated the designs in the description to move forward with the soft highlight for this iteration.

[jldec]

Removing from in-progress

[gtsiolis]

I've opened the follow-up #10976 and reopened the #7879 for keeping track of the outstanding two tasks of this epic.

@jldec Sounds good to close this issue (epic) based on #8385 (comment)?

[jldec]

@gtsiolis, I'd prefer to keep this Epic open since we still have 2 incomplete tasks - they're just not scheduled for immediate implementation.

[gtsiolis]

Sounds good, @jldec! Your call. 🏀

Just wanted to bring some visibility to these new follow-up issues.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.