Improve UX for resize feature

[LMS007]

It's unclear that the open/close button also allows for dragging and changing the size of the sidebar. It feels a tad overloaded and also makes it difficult to nail down a11y controls. It may be worth adding an additional UI control that is specifically for resizing:

Here is how it is implemented in stackoverflow

Requirements

• New UX design for drag feature
• Implement design
• Ensure it has reasonable a11y that makes sense
• Make sure that the sidebar resizes correctly even with mobile (narrow) versions. See sidebar floats left in narrow window client#1308

[jaredpdesigns]

@LMS007 some explorations for making the expanding/collapsing of the sidebar was done in my Pattern Library work including new icons. Here’s an example if we added a separate drag option which would behave similar to the StackOverflow example.

One other thought in regards to a11y concerns, is making sure buttons have proper ARIA-labels to indicate their action (which I’m sure we’re already implementing) :)

[jaredpdesigns]

One other thought regarding dragging vs. expanding/collapsing. Expanding/collapsing actions imply a fixed width of the sidebar and only open or closed, in the current UI it wasn’t ever really clear to me that you could drag the sidebar beyond the default expanded width, I think the addition of a separate control would make this clearer. For clarity we could also consider a slightly different design of the drag button so that in integrates more clearly into the background of the sidebar.