Hide and show sidebar panel in shiny

Question

My shiny app has 3 tabPanel in mainPanel, each tabPanel has their own sidebarPanel. I use shinyBS to set sidebarPanel "show and Hide"

bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE)

In server

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")
 }
 })

I test couple times, 2 tabs work like I expected, but the tab with plots (I use plotly), it appears hiding sidebar but the plots are not automatic stretching out until I click the other tab and go back Plot tab. So if I want to see the plots with full screen, I need to do extra by clicking another tab, and come back.

How do I fix this issue?

Thanks

Answer 1

Next time please post reproducible example ...

library(shiny)
library(shinydashboard)
library(plotly)
library(shinyjs)
library(shinyBS)
ui <- dashboardPage(
 dashboardHeader(),
 dashboardSidebar(),
 dashboardBody(
 useShinyjs(),
 extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
 $(window).trigger("resize"); }'),
 extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
 $(window).trigger("resize"); }'),
 bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
 fluidRow(tabsetPanel(id='tabs',
 tabPanel(value=1,title="Tab1"),
 tabPanel(value=2,title="Tab2"),
 tabPanel(value=3, title="Plot",
 fluidRow(
 column(12,
 plotlyOutput('plot', height=800))))
 )
 )))
server <- function(input, output, session) { 
 output$plot <- renderPlotly({
 plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
 })
 observe({
 if(input$showpanel == TRUE) {
 js$showSidebar()
 }
 else {
 js$hideSidebar()
 }
 })
}
shinyApp(ui, server)

One way to do this is to trigger a window resize event when you add/remove the sidebar to force the plot to be redrawn at the right size after the sidebar is shown/hidden. For this purpose i have used:

useShinyjs(),
 extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
 $(window).trigger("resize"); }'),
 extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
 $(window).trigger("resize"); }')

functions.

• Tarun Parmar: Getting this error when I try your app: Error: shinyjs: extendShinyjs: 'functions' argument must be provided.

Answer 2

The functions argument was missing

 extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
 $(window).trigger("resize"); }', functions=c("hideSidebar")),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
 $(window).trigger("resize"); }', functions=c("showSidebar")),

• fmassica: Hi Victor. I think you are answering the Tarun-Parmar comments on the answer from Mal_a. If so, the purpose here is to answer the main question. You could make another comment on that.
• Community: As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
• mnist: This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review