feat(sidebar): Improve collapsible sidebars on mobile

inst/builtin/bs5/shiny/_rules.scss

@@ -157,14 +157,17 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
     }
   }
 
-  // Set the background color of page dashboard class...
-  .bslib-page-dashboard,
-  // or of global main content area in a page_navbar() with a global sidebar
-  .main:has(.tab-content > .bslib-page-dashboard.active) {
-    background-color: var(--bslib-dashboard-main-bg);
-    // or of main area of a page_sidebar()
-    --_main-bg: var(--bslib-dashboard-main-bg);
-  }
+    // Set the background color of page dashboard class...
+    .bslib-sidebar-layout {
+      &:has(> .bslib-page-dashboard),
+      // or of global main content area in a page_navbar() with a global sidebar
+      &:has(.tab-content > .bslib-page-dashboard.active) {
+        background-color: var(--bslib-dashboard-main-bg);
+        // or of main area of a page_sidebar()
+        --_main-bg: var(--bslib-dashboard-main-bg);
+        ;
+      }
+    }
 
   .bslib-page-navbar, .bslib-page-dashboard {
     > .navbar {
@@ -288,6 +291,7 @@ $icon-classes: ("bi", "fa", "fas", "far", "fab", "material-icons") !default;
 #shiny-modal-wrapper:has( ~ .modal-backdrop) .modal {
   // Blur the background when the modal has a backdrop
   backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 
 // Progress Bars & Notifications

inst/components/scss/page_fillable.scss

@@ -30,24 +30,6 @@
         > .main > .html-fill-item {
           flex: 0 0 auto;
         }
-
-        &:not(.sidebar-right) {
-          > .main {
-            padding-left: var(--_padding-icon);
-            padding-top: var(--_padding);
-          }
-          > .collapse-toggle {
-            left: calc(var(--_icon-size) / 2);
-          }
-        }
-        &.sidebar-right {
-          > .main {
-            padding-right: var(--_padding-icon);
-          }
-          > .collapse-toggle {
-            right: calc(var(--_icon-size) / 2);
-          }
-        }
       }
     }
   }

inst/components/scss/page_sidebar.scss

@@ -21,12 +21,40 @@ $bslib-sidebar-padding: $spacer * 1.5 !default;
     margin-bottom: 0;
     line-height: var(--#{$prefix}body-line-height);
   }
+}
+
+@include media-breakpoint-down(lg) {
+  // Remove symmetrical icon gutter from page-sidebar, i.e. show the gutter on
+  // the sidebar side only to make room for content.
+  .bslib-page-sidebar,
+  .bslib-page-navbar>div {
+    >.bslib-sidebar-layout.sidebar-collapsed {
+      &:not(.sidebar-right)>.main {
+        padding-right: var(--_padding);
+      }
 
+      &.sidebar-right>.main {
+        padding-left: var(--_padding);
+      }
+    }
+  }
 }
 
 @include media-breakpoint-up(sm) {
-  .bslib-page-main {
-    min-width: var(--bslib-page-main-min-width, #{$bslib-page-main-min-width});
-    min-height: var(--bslib-page-main-min-height, #{$bslib-page-main-min-height});
-  }
+  // Ensure the page-level main area has a minimum height and width to prevent
+  // overly squished content in small screens, like IDE preview panels.
+  .bslib-sidebar-layout {
+    .bslib-page-main {
+      min-height: var(--bslib-page-main-min-height, #{$bslib-page-main-min-height});
+    }
+
+    // But only apply the width constraint when the sidebar expanded (i.e.
+    // not collapsed or in transition) to prevent overlap with toggle button.
+    &:not(.sidebar-collapsed),
+    &.transitioning {
+      .bslib-page-main {
+        min-width: var(--bslib-page-main-min-width, #{$bslib-page-main-min-width});
+      }
+    }
+  } 
 }

inst/components/scss/sidebar.scss

@@ -1,6 +1,6 @@
 // User-facing variables, use for theming
 $bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
-$bslib-sidebar-fg: null !default;
+$bslib-sidebar-fg: var(--_main-fg) !default;
 $bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
 $bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
 
@@ -33,6 +33,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
   --_toggle-position-x: calc(-2.5 * var(--_icon-size) - var(--bs-card-border-width, 1px));
   --_mobile-max-height: var(--bslib-sidebar-mobile-max-height, var(--bslib-sidebar-max-height-mobile));
   --_sidebar-mobile-opacity: var(--bslib-sidebar-mobile-opacity);
+  --_main-mobile-expanded-opacity: var(--bslib-sidebar-main-mobile-expanded-opacity, 0);
   --_sidebar-mobile-max-width: var(--bslib-sidebar-mobile-max-width);
   --_sidebar-mobile-box-shadow: var(--bslib-sidebar-mobile-box-shadow);
   --_column-main: minmax(0, 1fr);
@@ -47,7 +48,10 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
   grid-template-columns: $bslib-sidebar-column-sidebar var(--_column-main);
   position: relative;
 
-  @include transition(grid-template-columns ease-in-out var(--_transition-duration));
+  @include transition(
+    grid-template-columns ease-in-out var(--_transition-duration),
+    background-color linear var(--_transition-duration)
+  );
 
   border: var(--_border);
   border-radius: var(--_border-radius);
@@ -89,7 +93,6 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
     border-bottom-right-radius: 0;
     color: var(--_sidebar-fg);
     background-color: var(--_sidebar-bg);
-    backdrop-filter: blur(5px);
 
     > .sidebar-content {
       display: flex;
@@ -110,7 +113,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
         margin-left: calc(-1 * var(--_padding));
         margin-right: calc(-1 * var(--_padding));
         &:last-child {
-            margin-bottom: calc(-1 * var(--_padding));
+          margin-bottom: calc(-1 * var(--_padding));
         }
         &:not(:last-child) {
           margin-bottom: $spacer;
@@ -315,28 +318,68 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
     }
 
     &[data-collapsible-mobile="true"] {
+      // On mobile, when the sidebar is collapsible, we add an additional row
+      // for the collapse toggle. This avoid overlapping the toggle and the
+      // main content when the sidebar is collapsed. When the sidebar expands,
+      // it takes up the entire layout area.
+      grid-template-rows: calc(var(--_icon-button-size) + var(--_padding)) 1fr;
+      > .collapse-toggle {
+        grid-row: 1 / 2; // top row
+      }
+      > .main {
+        grid-row: 2 / 3; // bottom row
+      }
+      > .sidebar {
+        grid-row: 1 / 3; // whole layout
+      }
       // Sidebar layer has to be lifted up to cover other (nested) sidebars
-      &:not(.sidebar-collapsed), &.transitioning {
-        > .sidebar { z-index: $zindex-offcanvas; }
-        > .collapse-toggle { z-index: $zindex-offcanvas; }
+      &:not(.sidebar-collapsed),
+      &.transitioning {
+        > .sidebar {
+          z-index: $zindex-offcanvas;
+        }
+        > .collapse-toggle {
+          z-index: $zindex-offcanvas;
+        }
       }
 
+      > .collapse-toggle {
+        top: unset;
+        position: relative;
+        align-self: center;
+      }
+
       // Keep toggle on sidebar side when expanded on mobile
       &:not(.sidebar-right) > .collapse-toggle {
         left: var(--_icon-size);
         right: unset;
+        justify-self: left;
       }
 
       &.sidebar-right > .collapse-toggle {
         right: var(--_icon-size);
         left: unset;
+        justify-self: right;
       }
 
       > .sidebar {
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
         opacity: var(--_sidebar-mobile-opacity, 1);
         max-width: var(--_sidebar-mobile-max-width, 100%);
         box-shadow: var(--_sidebar-mobile-box-shadow);
+      }
+
+      // Move scrollable region to .sidebar-content to avoid scrolling sidebar
+      // elements underneath the collapse toggle
+      > .sidebar {
         margin: 0;
+        padding-top: var(--_padding-icon);
+      }
+      > .sidebar > .sidebar-content {
+        padding-top: 0;
+        height: 100%;
+        overflow-y: auto;
       }
 
       // When `max-width` is less than 100%, push it to the appropriate side
@@ -362,21 +405,30 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
         }
       }
 
-      // Set padding on main area to account for toggle button
+      // Padding appears in collapse toggle grid region
       > .main {
-        padding-top: var(--_toggle-collective-height);
+        padding-top: 1px;
         padding-left: var(--_padding);
         padding-right: var(--_padding);
       }
 
-      // Soften main area when sidebar is expanded over content
+      // Hide (or soften) main area when sidebar is expanded over content
       > .main {
-        opacity: 0.33;
+        opacity: var(--_main-mobile-expanded-opacity);
         transition: opacity var(--_transition-easing-x) var(--_transition-duration);
       }
       &.sidebar-collapsed > .main {
         opacity: 1;
       }
+
+      // Move main bg to layout container so that the collapse toggle grid
+      // region has the same background as the main area
+      > .main {
+        background-color: none;
+      }
+      &, &.sidebar-collapsed {
+        background-color: var(--_main-bg);
+      }
     }
   }
 }