cssrshinyshinyjs

How to control the main panel width in Shiny App during collapse and expand?

I have a shiny app with side bar and main panel where on clicking the toggle button, sidebar collapses and main panel expands (width also increases). But when I try to click the toggle button again the main panel width stays the same with Sidebar expanded and Main panel underneath the Sidebar.

Example Code:

library(shiny)
library(bsplus)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  
  tags$style(HTML(
    "#mainPanel {
       background-color: blue;
       color: white; 
    }"
  )),
  titlePanel("Toggler"),
  tags$div(id = "sidebar",
           sidebarPanel(
             bs_accordion(
               id = "accordion"
             ) %>%  
               bs_set_opts(
                 use_heading_link = TRUE
               ) %>%  
               bs_append(
                 title = tags$div(tags$i(class = "fa-solid fa-upload"),"Upload"),
                 content = fileInput("upload", "Upload a Excel File", 
                                     accept = c(".xlsx",".csv"))
               ) ,
             use_bs_accordion_sidebar()
           )
  ),
  mainPanel(
    id = "mainPanel",
    actionButton("toggle_btn", "Toggle"))
)

server <- function(input, output, session) {
  options(shiny.maxRequestSize = 100*1024^2) # Upload file Size Limit (100mb)
  
  session$onSessionEnded(function() {
    stopApp()
  })
  
  observeEvent(input$toggle_btn, {
    shinyjs::toggle(id = "sidebar")
    
    if (input$toggle_btn) {
      runjs('$("#mainPanel").css("width", "100%");')
    } else {
      runjs('$("#mainPanel").css("width","20%");')
    }
  })
}

shinyApp(ui, server)

Result:

enter image description here

I want the main Panel to return back to its original position along with width on toggle.

Solution

  • The if condition on input$toggle_btn won't work. You can put a boolean value which measures the state of the button inside an reactiveValues and change this state when the toggle button is clicked. Also we edit the CSS such that the formatting will return to the original style.

    enter image description here

    library(shiny)
library(bsplus)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    
    tags$style(HTML(
        "#mainPanel {
       background-color: blue;
       color: white; 
    }"
    )),
    titlePanel("Toggler"),
    tags$div(id = "sidebar",
             sidebarPanel(
                 bs_accordion(
                     id = "accordion"
                 ) %>%  
                     bs_set_opts(
                         use_heading_link = TRUE
                     ) %>%  
                     bs_append(
                         title = tags$div(tags$i(class = "fa-solid fa-upload"),"Upload"),
                         content = fileInput("upload", "Upload a Excel File", 
                                             accept = c(".xlsx",".csv"))
                     ) ,
                 use_bs_accordion_sidebar()
             )
    ),
    mainPanel(
        id = "mainPanel",
        actionButton("toggle_btn", "Toggle"))
)

server <- function(input, output, session) {
    options(shiny.maxRequestSize = 100*1024^2) # Upload file Size Limit (100mb)
    
    session$onSessionEnded(function() {
        stopApp()
    })
    
    bln <- reactiveValues(hidden = FALSE)
    
    observeEvent(input$toggle_btn, {
        shinyjs::toggle(id = "sidebar")
        
        if (!bln$hidden) {
            runjs('$("#mainPanel").css("width", "100%");')
            bln$hidden <- TRUE
        } else {
            runjs('$("#mainPanel").css("width","66.66%");')
            bln$hidden <- FALSE
        }
    })
}

shinyApp(ui, server)