Resize bs4Dash controlbar on button click

Question

I want to resize my bs4Dash controlbar on a button click- specifically, when clicking on a controlbaritem button. I can't seem to get updateControlbar() to work the way I want it to (e.g, resize the controlbar from 350 to 600px). Is my requirement possible?

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(uiOutput("sidebar")),
    body = dashboardBody(),
    controlbar = dashboardControlbar(
      id = "controlbar",
      wdth = 350,
      pinned = TRUE,
      controlbarMenu(
        id = "menu",
        type = "pills",
        controlbarItem(id = "button1", title = "button1"),
        controlbarItem(id = "button2", title="button2")
      )
    )
  ),
  server = function(input, output, session) {
    output$sidebar <- renderMenu({
      sidebarMenu(id = "main_menu",
                  menuItem(text = "First page", tabName = "tab1"),
                  menuItem(text = "Second page", tabName = "tab2")
      )
    })
    
    observeEvent(input$button2, {
      updateControlbar(id = "controlbar", session=session, width = 600)
    })
    
  }
)

Answer 1

Feels like updateControlbar won't allow you to change the width, I read the help file and it seems update width is not an option (correct me if I am wrong).

Here I provide you an alternative option, using javascript from UI to directly update the UI. All you need to do is add the following line to your body,

tags$script('$(function(){$(\'[data-value="button2"]\').click(function(){$("#controlbar").css("width", "600px")})})')

like this

 body = dashboardBody(tags$script('$(function(){$(\'[data-value="button2"]\').click(function(){$("#controlbar").css("width", "600px")})})')),

change 600px to whatever the width you want.