Disable/Enable click on dashboard sidebar in shiny

Question

Is there a way by which I can disable/enable click on dashboard sidebar so as to prevent the user from navigating to a different view in shiny?.

I came across this solution "disabling/enabling sidebar from server side" but all it does is collapse/un-collapse the sidebar.

But I am looking for some solution by which I can enable/disable the click on it ,so as to have more control over when to allow access to the users to navigate to a different view.

One use case is: If I want user to first fill all the inputs on the first page before he/she can navigate to a different section.

Answer 1

You can do this using shinyjs package along with some custom css. Here is a minimal example:

library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    useShinyjs(),
    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"))
    )
    
  ),
  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){
  
  
  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)

By clicking the button "Enable(Enable Widgets)" and "Disable(Disable Widgets)" you can enable and disable the menuitem widgets.

EDIT:

To ensure that the when the app loads the menuItems are disabled you can just add the addCssClass function in your server so that your it gets executed when your app loads.

So the code will look something like this:

library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    useShinyjs(),
    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"))
    )
    
  ),
  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){
  
  #Disable menuitem when the app loads
  addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
  
  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)

Answer 2

Regarding the comment by @yeahman269:

Thank you very much @SBista for your answer. Is there an easy way to modify the cursor with the common "ban" icon? Or doing something which intuitively shows the user that the tab ("Widget" here) is disabled? Because we can't visually distinguish its state.

If you want to custum the cursor and have the same style of disable button, you need to custum .inactiveLink first, and after modify .inactiveLink:active (as suggested here : Add CSS cursor property when using "pointer-events: none"? )

dashboardSidebar(
    useShinyjs(),
    sidebarMenu(id = "sidebar",
                tags$head(tags$style(".inactiveLink {
                                     cursor: not-allowed;
                                     }
                                     .inactiveLink:active {
                                     pointer-events: none;
                                     }")),
     menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
     menuItem("Widgets", tabName = "widgets", icon = icon("th"))
                )
   )