Skip to content

Commit

Permalink
Use page_navbar() for shared sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
gadenbuie committed May 9, 2023
1 parent dca0e3c commit eac7185
Showing 1 changed file with 68 additions and 26 deletions.
94 changes: 68 additions & 26 deletions inst/apps/312-bslib-sidebar-resize/app.R
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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)

0 comments on commit eac7185

Please sign in to comment.