R Shiny - resizing the MainPanel window when I minimize the sidebarPanel

Question

I built a brilliant application that has a fluid page and layout using sidebarPanel and mainPanel. Right now I am using a button that minimizes the sidebarPanel, but when this happens, the mainPanel keeps its width. I would like mainPanel to adjust to the new screen size and use the whole window instead of preserving the original 66% that it usually uses.

This is the button event that I use in the server.r file:

observeEvent(input$showpanel, {

if(input$showpanel == TRUE) {

shinyjs::show(id = "Sidebar")
shinyjs::enable(id = "Sidebar")
}
else {

  shinyjs::hide(id = "Sidebar")
}
})

This is the button that I use in the ui.r file, which is now at the top of the mainPanel window.

mainPanel(
  bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),

I don't know if there is a way to add CSS or HTML to the mainPanel when I hide the sidebarPanel.

Answer 1

, mainPanel col-sm-8 col-sm-12. :

library(shiny)
library(shinyjs)
library(shinyBS)

ui <- fluidPage(
  useShinyjs(),
  sidebarLayout(

    sidebarPanel(id = "Sidebar",
      h2("This is a sidebar panel")
    ),

    mainPanel(id ="Main",
      bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE)
    )
  )

)

server <- function(input, output, session){
  observeEvent(input$showpanel, {

    if(input$showpanel == TRUE) {
      removeCssClass("Main", "col-sm-12")
      addCssClass("Main", "col-sm-8")
      shinyjs::show(id = "Sidebar")
      shinyjs::enable(id = "Sidebar")
    }
    else {
     removeCssClass("Main", "col-sm-8")
      addCssClass("Main", "col-sm-12")
      shinyjs::hide(id = "Sidebar")
    }
  })


}

shinyApp(ui = ui, server = server)