fix(sidebar): Position and padding for mobile sidebars

[gadenbuie]

Fixes

Fixes a couple of small changes that were unintentionally added in #908

• fix padding to avoid gutter on sidebar side, instead toggle is in top-padding
• Fixes https://github.com/rstudio/bslib/issues/967, fix position to align toggles for nested sidebars

Nested Layout Sidebar

On the left

library(shiny)
library(bslib)

sb_position <- "left"

ui <- page_sidebar(
  fillable_mobile = TRUE,
  padding = 0,
  sidebar = sidebar("page sidebar", open = "desktop", position = sb_position),
  layout_sidebar(
    sidebar = sidebar("Inner sidebar", position = sb_position),
    value_box("Value box", "Value box content", fill  = TRUE),
    border = FALSE,
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

On the left, not filling on mobile

library(shiny)
library(bslib)

sb_position <- "left"

ui <- page_sidebar(
  fillable_mobile = FALSE,
  padding = 0,
  sidebar = sidebar("page sidebar", open = "desktop", position = sb_position),
  layout_sidebar(
    sidebar = sidebar("Inner sidebar", position = sb_position),
    value_box("Value box", "Value box content", fill  = TRUE),
    border = FALSE,
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

On the right

library(shiny)
library(bslib)

sb_position <- "right"

ui <- page_sidebar(
  fillable_mobile = TRUE,
  padding = 0,
  sidebar = sidebar("page sidebar", open = "desktop", position = sb_position),
  layout_sidebar(
    sidebar = sidebar("Inner sidebar", position = sb_position),
    value_box("Value box", "Value box content", fill  = TRUE),
    border = FALSE,
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Single Layout Sidebar

library(shiny)
library(bslib)

ui <- page_sidebar(
  sidebar = sidebar("page sidebar", open = "desktop", position = "left"),
  value_box("Value box", "Value box content", fill  = TRUE)
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Page navbar

On the left

library(shiny)
library(bslib)

ui <- page_navbar(
  padding = 0,
  sidebar = sidebar("page sidebar", open = "desktop", position = "left"),
  value_box("Value box", "Value box content", fill  = TRUE)
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

On the right

library(shiny)
library(bslib)

ui <- page_navbar(
  padding = 0,
  sidebar = sidebar("page sidebar", open = "desktop", position = "right"),
  value_box("Value box", "Value box content", fill  = TRUE)
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

[gregswinehart]

@gadenbuie this looks perfect! Thank you. The only question that comes to mind is: What happens when one scrolls?

[gadenbuie]

The only question that comes to mind is: What happens when one scrolls?

@gregswinehart well shoot, yeah, so that's exactly why we added the gutter back. 🤦

https://github.com/rstudio/bslib/assets/5420529/73e37a69-6c40-44bd-9a33-b82665aa8910

The current version of bslib (prior to this PR) uses the gutter approach when fillable_mobile = FALSE. That setting means that the layout shifts to a flow layout on mobile devices. It's also the default, meaning that users have to go out of their way to get the other approach.

It is possible to set things up to use fillable_mobile = TRUE, keeping the filling layout on mobile devices, but having a lower-level container scroll, which would keep the page-level sidebar toggle in the upper position and not have a gutter.

[gregswinehart]

@gregswinehart well shoot, yeah, so that's exactly why we added the gutter back. 🤦

@gadenbuie I think we're on the 1 yard line here... If we give the sidebar the app's background-color, the scroll can happen underneath that. If people have many, many sidebars, that won't look amazing, obviously... But... We definitely wouldn't recommend people do that in the first place.

https://github.com/rstudio/bslib/assets/5993637/8fb71f46-be33-4e10-ab47-a3e00ac9696d

[gadenbuie]

@gregswinehart that's a great idea! Unfortunately it's on the wrong 1-yard line 😆 The structure of our sidebar markup is roughly

<div class="bslib-sidebar-layout">
  <div class="main"></div>
  <aside class="sidebar"></aside>
  <button class="collapse-toggle"></button>
</div>

We'd need to wrap the <button> in a container that would become full width and have a background color in this particular instance. That's not that hard to do, but it's also not easy because we'd be changing the markup in lots of other places. So we're not exactly on the other side's 1-yard line either, but its more than a few yards away 😉

[gregswinehart]

Could we potentially get a first down with something like .bslib-sidebar-layout > .collapse-toggle:before?

[gadenbuie]

Could we potentially get a first down with something like .bslib-sidebar-layout > .collapse-toggle:before?

I tried that last week and there was a flag on the play. .collapse-toggle is position: absolute which makes it impossible (or at least hard) to position the ::before element to fill the width and have appropriate height. Also, since ::before and ::after are then part of the <button> element, they're clickable which would lead to some surprising behavior.