layout_sidebar() on mobile devices

[gadenbuie]

Problem

Currently, when using layout_sidebar(), users can either set open="desktop" to automatically initialize the sidebar in closed mode on mobile devices, or open="auto" to always show the sidebar on both mobile and desktop devices.

There isn't a way to achieve a middle ground where the sidebar is always visible on mobile devices, but collapsible on desktop screens.

Proposal

I'm proposing we add a new argument, collapsible, with the options c("desktop", "mobile", "always", "never"). The current behavior is equivalent to open="desktop", collapsible="always", and in cases where users want the sidebar contents to be collapsible on desktop but always visible on mobile, the could change collapsible="desktop".

We'd support any combination of open and collapsible, other than open="closed", collapsible="never". Note that open only applies when the sidebar is collapsible, so open="closed", collapsible="desktop" means that the sidebar is starts closed on desktop screens but can be opened, while it's always shown on mobile devices.

Here's the full break down of behavior:

open=	collapsible=	On Mobile...	On Desktop...
"desktop"	"desktop"	always open	starts open, can close
"desktop"	"mobile"	starts closed, can open	always open
"desktop"	"always"	starts closed, can open	starts open, can close
"desktop"	"never"	always open	always open
"always"	"desktop"	always open	always open
"always"	"mobile"	always open	always open
"always"	"always"	always open	always open
"always"	"never"	always open	always open
"open"	"desktop"	always open	starts open, can close
"open"	"mobile"	starts open, can close	always open
"open"	"always"	starts open, can close	starts open, can close
"open"	"never"	always open	always open
"closed"	"desktop"	always open	starts closed, can open
"closed"	"mobile"	starts closed, can open	always open
"closed"	"always"	starts closed, can open	starts closed, can open
"closed"	"never"	always open + WARN	always open + WARN

A few patterns emerge from the above:

• collapsible="never" means that the sidebar is always visible, regardless of the value of open. (open is the initial state of a collapsible sidebar.)
• If collapsible="desktop", the sidebar is always visible on mobile devices and vice-versa when collapsible="mobile"

The above sounds complicated, but in practice the implementation would be to include information about whether not the sidebar can be collapsed at desktop or mobile and use that to decide if the sidebar is "always shown". E.g. data-collapsible-desktop="false" would hide the collapse toggle and ensure that the sidebar is always visible on desktop screens.

[jcheng5]

This is separating out as if these are two separate concerns--but I don't think they are?

• If collapsible="never", then the only correct value for open= is "always".
• If open="always", then the only correct value for collapsible= is "never". (So which, in general, takes priority--collapsible or open?) (And seems generally weird that one of the open values has such an overlap with the collapsible semantics)
• open="desktop", collapsible="mobile" doesn't make sense
• There would be other edge cases if open="mobile" was an option

I'm not saying we couldn't adopt the table of logic above, but the fact that it exposes so many logically inconsistent combinations smells like these don't "want" to be separate.

What about what we discussed on the call?

open=dict(
  desktop="always|open|closed",
  mobile="always|open|closed",
)

...in addition to continuing to support the simple strings and bools we do today. And maybe a new None value that means "maybe let the container have an opinion about it".

This would be trivially backwards compatible with what we have now (whereas splitting into two might not be, depending on what we choose as the default for collapsible).

[gadenbuie]

It does get simpler if you take open="always" out of the table, but definitely not as simple as splitting open into separate decisions for desktop and mobile. I also like having these decisions be specifically for desktop and mobile and not at arbitrary breakpoints (although we could support arbitrary breakpoints at some point in the future).

[github-actions]

This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.
🙋 Need help? Connect with us on Discord or Posit Community.