Use page_navbar() for shared sidebar

Author: gadenbuie

inst/apps/312-bslib-sidebar-resize/app.R

@@ -1,5 +1,3 @@
-### Keep this line to manually test this shiny application. Do not edit this line; shinycoreci::::is_manual_app
-
 library(shiny)
 library(bslib)
 library(ggplot2)
@@ -18,39 +16,83 @@ lorem2 <- p(
   "nunc turpis libero nascetur!"
 )
 
-ui <- page_fixed(
-  titlePanel("Sidebar Resize", "312 | bslib-sidebar-resize"),
-  h2("Static plot resizing"),
-  p(
-    "The plot in the layout below should stretch while the sidebar is opening", "or closing. After the transition is complete, the server will update the",
-    "plot with the final dimensions."
-  ),
-  layout_sidebar(
-    sidebar = sidebar(title = "Toggle me", lorem1, lorem2, lorem1),
-    lorem1,
-    plotOutput("plot_static"),
-    lorem2
+ui <- page_navbar(
+  title = "312 | bslib-sidebar-resize",
+  theme = bs_theme("bslib-sidebar-transition-duration" = "3s"),
+  sidebar = sidebar(
+    title = "Shared Sidebar",
+    open = "open",
+    p("The plots should resize smoothly when this sidebar or the local sidebar are toggled.")
   ),
-  h2("Widget plot resizing", class = "mt-4 mb-2"),
-  p(
-    "The plot in the layout below should stretch while the sidebar is opening", "or closing. There should be no layout shift after the transition is", "complete."
+  nav(
+    "Static",
+    h2("Static plot resizing"),
+    p(
+      "The plot in the layout below should stretch while the sidebar is",
+      "opening or closing. After the transition is complete, the server will",
+      "update the plot with the final dimensions."
+    ),
+    layout_sidebar(
+      sidebar = sidebar(title = "Toggle me", lorem1, lorem2, lorem1),
+      lorem1,
+      plotOutput("plot_static1"),
+      lorem2
+    ),
+    h2("Shared only", class = "my-3"),
+    p(
+      "The next plot should resize smoothly only when the shared sidebar is transitioning."
+    ),
+    div(
+      class = "row",
+      div(class = "col", plotOutput("plot_static2")),
+      div(class = "col", p(lorem2, lorem1))
+    )
   ),
-  layout_sidebar(
-    sidebar = sidebar(title = "Toggle me", lorem1, lorem2, lorem1),
-    lorem1,
-    plotlyOutput("plot_widget"),
-    lorem2
+  nav(
+    "Widget",
+    h2("Widget plot resizing", class = "mt-4 mb-2"),
+    p(
+      "The plot in the layout below should stretch while the sidebar is opening",
+      "or closing. There should be no layout shift after the transition is",
+      "complete."
+    ),
+    layout_sidebar(
+      sidebar = sidebar(title = "Toggle me", lorem1, lorem2, lorem1),
+      lorem1,
+      plotlyOutput("plot_widget1"),
+      lorem2
+    ),
+    h2("Shared only", class = "my-3"),
+    p(
+      "The next plot should resize smoothly only when the shared sidebar is transitioning."
+    ),
+    div(
+      class = "row",
+      div(class = "col", plotlyOutput("plot_widget2")),
+      div(class = "col", p(lorem2, lorem1))
+    )
   ),
-  div(style = "min-height: 100vh")
+  footer = div(style = "min-height: 100vh")
 )
 
 server <- function(input, output, session) {
   plot <- reactive({
-    ggplot(mtcars, aes(mpg, wt)) + geom_point()
+    ggplot(mtcars, aes(mpg, wt)) +
+      geom_point(aes(color = factor(cyl))) +
+      labs(
+        title = "Cars go brrrrr",
+        x = "Miles per gallon",
+        y = "Weight (tons)",
+        color = "Cylinders"
+      ) +
+      theme_gray(base_size = 16)
   })
 
-  output$plot_static <- renderPlot(plot())
-  output$plot_widget <- renderPlotly(ggplotly(plot()))
+  output$plot_static1 <- renderPlot(plot())
+  output$plot_static2 <- renderPlot(plot())
+
+  output$plot_widget1 <- renderPlotly(ggplotly(plot()))
+  output$plot_widget2 <- renderPlotly(ggplotly(plot()))
 }
 
 shinyApp(ui, server)