Sidebar toggle - improve UX

[daattali]

This was first brought up in #798 (comment) and 2.5 years later it still really bugs me, so I wanted to bring it up again :)

When the sidebar is open

I find it odd that the toggle takes up vertical space that renders everything else on the row useless. It has two major drawbacks IMO: (1) taking up valuable real estate, and (2) visually it does not look good to have an empty row with a small arrow above the beginning of the sidebar.

I've looked at dozens of websites and apps to see their sidebars, and I haven't encountered a single one that gives the small toggle handle its own row.

I understand why it was done, because if I have, for example, an accordion as the first item in a sidebar, then the two arrows would clash. But there are many sidebars that have a title or some other element at the top that would be perfectly happy to share that space. I have added CSS manually to change the top-padding of the sidebar to fix this, but I would really like this issue to be reconsidered by the team, perhaps a way to let people easily choose a different type of sidebar toggle.

When the sidebar is closed

In the closed state, I also feel that it looks strange to have a small arrow take up the entire column. It looks weird to me aesthetically that all the content gets pushed to the right, and there is essentially just empty space next to it, except a small arrow on top.

I appreciate the difficulty in making a design that would work on all devices and in all scenarios, which is probably why you didn't choose to go with a "floating" button, because it may interfere with the content.

My suggestion is to allow the user to choose whether to keep the current behaviour, or to be able to provide a "collapsed" sidebar state. Something like these designs https://dribbble.com/search/collapse-sidebar ; it doesn't need to take up any more horizontal space than the current collapsed state, but instead of having pure whitespace from top to bottom, it can have some content. Most likely it would be icons. I haven't fully thought this out, but I do think there is merit to this and it should be explored.

[gadenbuie]

I appreciate the difficulty in making a design that would work on all devices and in all scenarios, which is probably why you didn't choose to go with a "floating" button, because it may interfere with the content.

Another big consideration is that sidebars can be nested, i.e. you can use nested layout_sidebar() calls to have more than one sidebar per container or both left and right sidebars in a container, etc.

There's fundamentally a difference between a generic "use anywhere" sidebar layout and a page-level sidebar layout. A lot of what you point out results from us using the more general purpose layout_sidebar() for the page-level sidebars. Our intention is to solve this when we resolve #585

[daattali]

You're right, for sidebars that are not top-level, a lot of this gets messier.

I'm fine with continuing to manually remove the paddings in my apps. If the team at Posit is happy with the current behaviour and looks, then you can close this issue.

Since I have you here.... :p I was wondering how to use the sidebar's padding argument to add ONLY a top padding, but leave the other 3 default. I tried padding = c(0, NA, NA) and c(0, "auto", "auto") but that didn't work, and I'm out of ideas.