Improve the UX of the sidebar collapse

[choldgraf]

Background

The UX of the sidebar can be a bit confusing for a few reasons:

1. The button to collapse the sidebar is currently outside of the sidebar when it is visible, which seems to break with how many web apps control sidebar behavior (they instead tend to put the button on top of the sidebar)
2. The button uses a left arrow (<-) as a "collapse" button, but this can be confused with a "browser back" button, especially on mobile (see Toggle Navigation Icon is Misleading jupyter-book/jupyter-book#1361)

Proposal

We could update the sidebar toggle button with the following properties:

1. Use a different button than a single left arrow, perhaps either

   • a caret (<)
   • a left bar button (e.g. )

2. Put the "collapse" button on top of the sidebar when it is open, in the top right, rather than above the page content

Some examples for inspiration

A few examples of the kind of behavior I imagine:

the Asana sidebar:

the Monday.com sidebar: