=== Description
{F34997461 width=900}
Currently, in legacy Vector, the toolbar (sometimes called the tab-bar) is above the titlebar. This approach, which follows from [[ https://en.wikipedia.org/w/index.php?title=The_House_of_the_Rising_Sun&useskin=Monobook | Monobook ]], helps create a frame around the content, separating it from the various navigation/menus/links that surround it. In new Vector we are taking a different approach to separating the content from the navigation/menu/links and no longer have the same need as previous skins for the toolbar to be above the titlebar. So we asked the question: should the toolbar remain above the titlebar? For the following reasons we think it makes sense to flip the order, so that the titlebar is above the toolbar:
- In general we see the titlebar being useful to all users, whereas the toolbar is more relevant to experienced users and contributors. Therefore we think it makes sense to have the titlebar come first, and the toolbar below
- Specific example: the titlebar now has the language switcher in it, and we think language switching is more valuable to most people visiting the site than the items in the toolbar
- Possible future example: in the future we're hoping to add additional reader tools to the interface (such as Share, Font settings, etc.) and plan on putting them in the titlebar, next to the language switcher
- From an information architecture standpoint the links and tools in the toolbar are related to the page you are on, so it makes sense to have the title above and the related links and tools below
- From a readability standpoint it's nice to have the page title be the first thing you see
- Our mobile skin, [[ https://en.wikipedia.org/wiki/Carl_Hubbell?useskin=Minerva | Minerva ]], shows the titlebar above the toolbar, and it's generally a best practice to be consistent when possible
Possible supporting evidence:
- [[ https://en.wikipedia.org/wiki/Carl_Hubbell?useskin=Timeless | Timeless ]] and [[ https://winter.toolforge.org/ | Winter ]] both place the titlebar above the toolbar
- Google Docs places the page title above the toolbar
=== Design
Visual design is still being worked out but here is a wireframe we can use in the meantime ([[ https://di-article-tools-da959.web.app/Humpback_whale | link to prototype ]]):
{F34997575 width=900}
== Acceptance criteria
[] Make feature flag for the change
[] Switch the titlebar above toolbar as per the design requirements above