Description
Currently the "user links" (e.g. Talk, Preferences, Sandbox, Log Out, etc.) are spread out across the top right of the screen for both logged-in and logged-out folks:
| logged-out user links (current) | logged-in user links (current) |
 |  |
Our goal is to consolidate these links into menus. Why do we want to consolidate these links into menus? We see most of these elements as non-critical (ie most people don't need them one click away most of the time). By consolidating them we hopefully a) reduce the general complexity of the interface (since there are fewer exposed elements), b) open up space for elements that might be more critical, c) add emphasis to the critical elements that remain (e.g. Create account).
Designs
Prototype: https://di-community-round-2.web.app/Romania (use the gray arrow on the bottom right to switch between logged-in and logged-out)
| logged-out | logged-in |
|---|---|
 |  |
Responsiveness down to 500px
| medium break-point | small break-point | |
| logged-out |  |  |
| logged-in |  |  |
Notes
- currently some gadgets appear in that top area, how can we help gadget developers make sure that their gadgets get added inside the menu?
Developer notes
There is a POC on Vector: https://gerrit.wikimedia.org/r/656518
We're likely want to carve this ticket up into multiple tickets as it feels a bit like an epic.
For icons I suggest an upstream change in the core is made to support list item HTML generation with icons.
The anonymous use case is an interesting one, and will likely require a dedicated template.
Note the responsive design collapses create account into the menu. It's going to be difficult to do this while keeping consistent HTML. One way would be making it inside the dropdown by default and pulling it out via JavaScript at large viewpoints, and another would be having 2 links in the HTML and hiding the unused one as appropriate.
