Disable click on shiny dashboard sidebar (when specifying ui layout in server function)

Question

SBista provides a very helpful answer on how to disable/enable click on a dashboard sidebar in shiny. However, if you need to specify the ui layout in the server function via a sidebarMenuOutput() command as in the example below, the app fails to disable the "Widgets" sidebar menu item as desired. Any tips would be greatly appreciated. Thanks!

library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    useShinyjs(),
    
    sidebarMenuOutput("menu")
    
  ),
  
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              actionButton("Disable", "Disable Widgets"),
              actionButton("Enable", "Enable Widgets")
      ),
      
      # Second tab content
      tabItem(tabName = "widgets",
              h2("Widgets tab content")
      )
    )
  )
)

server <- function(input, output, session){
  
  updateTabsetPanel(session = session,inputId = "sidebar",selected = "dashboard")

  #Disable menuitem when the app loads
  addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
  
    
  output$menu <- renderMenu(
    dashboardSidebar(
      sidebarMenu(id = "sidebar",
                  tags$head(tags$style(".inactiveLink {
                            pointer-events: none;
                           cursor: default;
                           }")),
                  menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
                  menuItem("Widgets", tabName = "widgets", icon = icon("th"))
      )
    )
  )
  
  
  observeEvent(input$Disable, {
    addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
    
  })
  observeEvent(input$Enable, {
    removeCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
  })
  
}
shinyApp(ui, server)

score 1 · Answer 1 · answered Mar 17 '23 at 21:16

With javascript we could toggle the sidebar. Code adapted from here To enable and disable sidebar toggle button using a action button

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    useShinyjs(),
    
    sidebarMenuOutput("menu")
    
  ),
  
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              actionButton("Disable", "Disable Widgets"),
              actionButton("Enable", "Enable Widgets")
      ),
      
      # Second tab content
      tabItem(tabName = "widgets",
              h2("Widgets tab content")
      )
    )
  )
)

server <- function(input, output, session){
  
  updateTabsetPanel(session = session,inputId = "sidebar",selected = "dashboard")
  
  #Disable menuitem when the app loads
  addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
  
  
  output$menu <- renderMenu(
    dashboardSidebar(
      sidebarMenu(id = "sidebar",
                  tags$head(tags$style(".inactiveLink {
                            pointer-events: none;
                           cursor: default;
                           }")),
                  menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
                  menuItem("Widgets", tabName = "widgets", icon = icon("th"))
      )
    )
  )
  
  
  observeEvent(input$Disable, {
    shinyjs::runjs("document.getElementsByClassName('sidebar')[0].style.visibility = 'hidden';")
    
  })
  observeEvent(input$Enable, {
    shinyjs::runjs("document.getElementsByClassName('sidebar')[0].style.visibility = 'visible';")
  })
  
}
shinyApp(ui, server)

Disable click on shiny dashboard sidebar (when specifying ui layout in server function)

1 Answers1