feat(sidebar): Independently customize sidebar state on mobile and de…

…sktop screens (#943)

* feat(sidebar_open_on): Customize sidebar state for `desktop` and `mobile` separately

* feat(page_sidebar): Default to `desktop="open"`, `mobile="always"`

* sidebar: Update JS and CSS

* chore: yarn build

* fix: Remove extra padding-top if not collapsible

* tests: update snaps

* chore: Event listeners are only needed if sidebar can collapse

* chore: a few comment edits

* refactor: relocate windowSize field

* refactor: simplify reading of `data-open-` and `data-collapsible-` attributes

* chore: yarn build

* refactor: Use `as.tags.bslib_sidebar()` instead of `render_as_tags.sidebar()`

* refactor: Don't export `sidebar_open_on()`, users give regular lists instead

* refactor(sidebar.scss): sidebar content is flex

* chore(sidebar.R): Apply suggestions from code review

* chore(sidebar.ts): Apply suggestions from code review

* chore: yarn build

* docs: add news item

* Apply suggestions from code review

Co-authored-by: Carson Sievert <cpsievert1@gmail.com>

* docs: tweak wording of news

---------

Co-authored-by: gadenbuie <gadenbuie@users.noreply.github.com>
Co-authored-by: Carson Sievert <cpsievert1@gmail.com>

NAMESPACE

@@ -1,5 +1,6 @@
 # Generated by roxygen2: do not edit by hand
 
+S3method(as.tags,bslib_sidebar)
 S3method(is_fill_item,default)
 S3method(is_fill_item,htmlwidget)
 S3method(is_fillable_container,default)
@@ -149,6 +150,7 @@ export(versions)
 import(htmltools)
 import(sass)
 importFrom(grDevices,col2rgb)
+importFrom(htmltools,as.tags)
 importFrom(jquerylib,jquery_core)
 importFrom(jsonlite,fromJSON)
 importFrom(lifecycle,deprecated)

NEWS.md

@@ -4,6 +4,8 @@
 
 * `as_fillable_container()`, `as_fill_item()` and `as_fill_carrier()` now always include the htmltools fill CSS dependency. This means that they are no longer usable with the `$addAttr()` `htmltools::tagQuery` method; authors should instead pass elements to the `as_fillable_container()` and `as_fill_*()` functions and use the `css_selector` argument to apply fill options to specific elements.  (#946)
 
+* A `sidebar()` passed to `page_sidebar()`/`page_navbar()` is now always open (and not collapsible) by default on mobile screens. To revert to the old behavior, set `open = "desktop"` in the `sidebar`. (#943)
+
 ## Improvements
 
 * `layout_columns()` was rewritten in Typescript as a custom element to improve the portability of the component. (#931)
@@ -12,6 +14,8 @@
 
 * When `layout_columns()` is given a `col_widths` value with `breakpoints()` at `lg` or wider, it now uses a better default column width for the smaller breakpoints not listed in the `col_widths` value. That said, you can always include `sm` or `md` in your `breakpoints()` definition to have complete control over column widths at those sizes. (#931)
 
+* `sidebar()` now supports separate choices for the `open` argument on mobile or desktop screens. You can pass a list with `mobile` and `desktop` values to `open` to control the sidebar's initial state on each screen size, choosing from `"open"`, `"closed"`, or `"always"` (for an always-open sidebar that cannot be collapsed). (#943)
+
 ## Bug fixes
 
 * `layout_columns()` now always uses a 12-unit grid when the user provides an integer value to `col_widths` for any breakpoint. For example, `breakpoints(md = 3, lg = NA)` will pick a best-fitting layout for large screen sizes using the 12-column grid. Previously, the best fit algorithm might adjust the number of columns as a shortcut to an easy solution. That shortcut is only taken when an auto-fit layout is requested for every breakpoint, e.g. `col_widths = breakpoints(md = NA, lg = NA)` or `col_widths = NA`. (#928)

R/page.R

@@ -263,6 +263,8 @@ page_sidebar <- function(
     title <- h1(title, class = "bslib-page-title")
   }
 
+  sidebar <- maybe_page_sidebar(sidebar)
+
   page_fillable(
     padding = 0,
     gap = 0,
@@ -282,6 +284,18 @@ page_sidebar <- function(
   )
 }
 
+maybe_page_sidebar <- function(x) {
+  if (is.null(x)) return(NULL)
+  if (!inherits(x, "sidebar")) {
+    x <- sidebar(x)
+  }
+
+  # If `open` is not provided, choose a page-level default
+  x$open <- x$open %||% sidebar_open_on(desktop = "open", mobile = "always")
+
+  x
+}
+
 
 #' Multi-page app with a top navigation bar
 #'
@@ -370,6 +384,7 @@ page_navbar <- function(
   lang = NULL
 ) {
 
+  sidebar <- maybe_page_sidebar(sidebar)
 
   # Default to fillable = F when this is called from shiny::navbarPage()
   # TODO: update shiny::navbarPage() to set fillable = FALSE and get rid of this hack