As the new translation dashboard supports different views based on the translaiton status (suggestions, in-progress, and published), a control to switch between those views is needed.
The switcher will support different screen sizes:
Narrow screens
On narrow screens it is presented as a navigation panel at the bottom for easy thumb access on mobile devices:
Based on the breakpoint proposal (T303522), this applies to:
- @min-width-breakpoint-mobile 320px - 639px
Wider screens
For larger screens the options to switch between views will be located on the side before the lists (i.e. left side for Left-to-Right languages). To make sure that there is enough space for the contents and the sidebar, it will use a different number of columns based on a 12 column grid (more details about reference grid in T90687).
More details can be inspected in the Figma design
This version is shown only for sizes larger than the "phone". Based on the breakpoint proposal (T303522), this applies to:
- @min-width-breakpoint-desktop-wide 1680px and more
- @min-width-breakpoint-desktop 1120px - 1679px
- @min-width-breakpoint-tablet 640px - 1119px
Responsive adjustments
The mockups bellow illustrate some examples of how the switcher is represented differently on different reference sizes:
| Mobile | Tablet Vertical | Tablet Horizontal | Desktop |
|---|---|---|---|
 |  |  |  |
