Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(sidebar): Position and padding for mobile sidebars #996

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

fix(sidebar): Position and padding for mobile sidebars #996

wants to merge 3 commits into from
+9 −6

Conversation

gadenbuie
Copy link
Member

Fixes

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

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)

image

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)

image

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)

image

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)

image

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)

image

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)

image

gadenbuie and others added 3 commits February 28, 2024 15:09
@gadenbuie
fix(sidebar): Position and padding for mobile sidebars
f342d76 
* fix padding to avoid gutter on sidebar side, instead toggle is in top-padding
* fix position to align toggles for nested sidebars
@gadenbuie
Resave distributed files (GitHub Action)
b08df8f
@gadenbuie
Resave data (GitHub Action)
d72f8bb
@gregswinehart
Copy link
Contributor

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

@gadenbuie
Copy link
Member Author

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. 🤦

Kapture.2024-02-29.at.09.47.32.mp4

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
Copy link
Contributor

gregswinehart commented Feb 29, 2024 •
edited

@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.

garrick.mp4

@gadenbuie
Copy link
Member Author

@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
Copy link
Contributor

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

@gadenbuie
Copy link
Member Author

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.

@gadenbuie gadenbuie marked this pull request as draft March 14, 2024 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cpsievert cpsievert Awaiting requested review from cpsievert

@gregswinehart gregswinehart Awaiting requested review from gregswinehart

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

bug: Nested sidebar collapse toggle position on mobile
2 participants
@gadenbuie @gregswinehart