Improve page layout of editorial backend for tablets and phones

[NateWr]

Describe the problem you would like to solve
The editorial backend is difficult to use on a tablet or phone. The side navigation menu takes up a large amount of space, leaving little room for the main content of the page. This means that on a tablet or phone most of the important content on the page is squished together or requires the user to scroll right/left to access.

Describe the solution you'd like
Implement a collapsible navigation menu that can be opened/closed on smaller devices. This will provide more room for other content on the page. The navigation menu should only be opened/closed on smaller screens (<1200px wide). On larger screens, the user should not have to open it to view it.

Also, the top header of the editorial backend, which shows the journal name, user profile and tasks buttons, should be fixed to the top of the screen so that when the user scrolls down, the button to open/close the navigation menu is always visible.

This would not fix all of the UX issues for tablets and phones. Many of the UI components of the editorial backend do not adjust to small screens and it is especially unusable on phones. However, a hidden navigation menu is an important first step and will improve the UX for everyone.

Who is asking for this feature?
We do not get many requests for this feature. However, it is a pre-requisite to make the editorial backend accessible. Also, editors will benefit from being able to login and perform quick actions on-the-go, when they only have a phone or tablet. This should increase the usability of features like discussions and stage assignments.

Additional information
The following mockups were prepared for a redesigned submissions list. However, they apply equally to all editorial backend pages that are accessed by a user with a side navigation menu.

On a small screen, the navigation menu is hidden.

The user can click the hamburger icon (three lines) at the top right to show/hide it. When opened, the navigation menu sits on top of the content.

The menu would work in a similar way on a mobile device.#

[asmecher]

Moving off to 3.6 for now.