Improve the "collapse menu" interface

[JoshuaWold]

I would like to propose an update to how the left sidebar collapses in the WordPress admin. Right now I can shrink the sidebar down by shrinking the screen, but there are times I'd like to make the sidebar smaller to focus on the content I'm writing.

It's also important that I don't have to go into fullscreen mode. It takes and a short delay to open/close it. While I'm in fullscreen mode I can't do anything else. Having a smaller sidebar visible at all times - with the option to easily make it bigger again - would be ideal. So, my proposal is:

What if we had 3 stages to the left navigation sidebar?

• As is, full size
• Partially collapsed (like how it shows on tablet view)
• Fully hidden

In order to drag between these states there would be a button that appears on hover to pull the sidebar left or right. Kind of like how Things 3 does it: ​https://v.usetapes.com/mi3p2NxN3Z

The attachment shows my recommendations for how I'd envision the 3 states:

*Note:* While the interface shows the Gutenberg plugin (this conversation originated on this issue: ​https://github.com/WordPress/gutenberg/issues/1522), the impact of this feature request applies to the WordPress admin as a whole, as such the discussion was moved to Trac.

[JoshuaWold]

Demonstration of how the collapse interface could work.

[JoshuaWold]

Additional things to consider:

• Would we allow the same for a right sidebar (in Gutenberg, for example) (idea suggested here: ​https://github.com/WordPress/gutenberg/issues/1522#issuecomment-311506268)
• A suggestion for how the animation might look: ​https://user-images.githubusercontent.com/1790660/27613161-a49731d0-5b5f-11e7-98c5-0ffd06eabe6b.gif (thanks to Brent Jett)

[afercia]

Fully hidden ... to focus on the content I'm writing.

Like in the Distraction Free Mode?

I'd also like to remind that when designing interfaces, they should be designed with accessibility in mind. WordPress aims to be usable by everyone. UI controls based only on "drag and drop" aren't operable with a keyboard, they need an additional, alternate mode.

On a side note, the menu has 4 states: expanded, auto-fold (kicks in automatically between 961 and 782 pixels viewport width, depending also on previous state), fold (user action), and responsive (under 782 pixels).

[JoshuaWold]

Great feedback. Hover and drag/drop need to also be associated with keyboard inputs that can get the same effect.

What if we just simplified this whole thing and basically added a button in the UI somewhere for a distraction free mode, much like the current editor button?

[dartiss]

To add further to this, it would be nice to have an option to auto-collapse the menu, where the menu would collapse to the icons but then re-appear when you hover over it.

Maybe any such options (which might be best controlled from the Settings menu rather than persistent icons in the menu) could also include, say, an option to only auto-collapse during editing.