Figure out Teams & Projects top menu navigation

[jankeromnes]

From #4571 (review):

One last question: Somewhere we split the team dropdown into two distinct elements. Could we restore this as one component? See relevant discussion (internal). ❓

We've recently split the Team selector dropdown into two parts:

1. Clicking on the team name goes to the default team page (i.e. "Projects", or "Workspaces" if your personal account is selected)
2. Clicking on the arrow allows switching to a different team

The thought was to allow a sort of "breadcrumb navigation", allowing to:

1. Dive into Teams > Projects > (a project) > (a prebuild)
2. Go back (e.g. to the Team, or switch to another team)

similar to how Vercel does it:

However, the current implementation feels awkward:

1. Clicking on my name (biggest clickable surface) does the same thing as clicking on the Gitpod logo (i.e. go to "Workspaces") -- it feels awkward that these two "primary" items go to the same place (i.e. broken link?)
2. Switching teams can only be done by clicking on the super small down-arrow (requires more precision & effort and might get overlooked)

It would be cool to improve this.

Proposal

In this iteration we can:

1. Introduce a new team selector (dropdown) component
2. Use a similar icon for showing the second-level page like prebuilds
3. (Optional) Add a hypelink on the project breadcrumb item to link back to project overview page.

Designs

Default	Hover	Active

Project	Prebuild

See design specs.

[jankeromnes]

Giving this a go 🖌️

[AlexTugarev]

@jankeromnes please base on #4876 🙏🏻 as I already added some changes to the menu structure.

[jankeromnes]

@AlexTugarev makes sense, thanks! I agree 😁

• Fix top menu UX: Figure out Teams & Projects top menu navigation #4622 (looks like part of that is already being implemented in Prebuilds Page #4876)