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.

score 10 · Accepted Answer · edited Dec 09 '21 at 04:14

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)

:- When the app loads-up for this first time it seems that `.inactiveLink` is absent but even then I am still able to navigate to 'Widgets' section. How can I make sure that the when the apps load for the first time, user cant navigate to other sections? — Rohit Saluja, Jan 16 '18 at 12:36
Do you mean you want the Widgets to be disabled when you initially load the app? — SBista, Jan 16 '18 at 12:38
@RohitSaluja, I have edited the answer. Hopefully the edit answers your query. — SBista, Jan 16 '18 at 12:47
Works beautifully, Can you also point me to some references which for shiny which I can look up. — Rohit Saluja, Jan 16 '18 at 12:51
I'm guessing you have already gone through these [R Studio’s Shiny tutorial](http://shiny.rstudio.com/tutorial/written-tutorial/lesson1/). I like Dean Attali's [basic](http://deanattali.com/blog/building-shiny-apps-tutorial/) and [advanced](https://deanattali.com/blog/advanced-shiny-tips/) tutorials too. — SBista, Jan 16 '18 at 12:55
I'll look up the advanced one. thanks :) Looks like I also need to brush up some javascript as well — Rohit Saluja, Jan 16 '18 at 13:00
Yes, for added functionality CSS and JavaScript is very helpful. — SBista, Jan 16 '18 at 13:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163249/discussion-between-rohit-saluja-and-sbista). — Rohit Saluja, Jan 16 '18 at 13:04
Thank you very much @SBista for your answer. Is there an easy way to modify the curson 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. — yeahman269, Mar 24 '21 at 17:55
@yeahman269 you can change the `tags$head` to the following to achieve that: ```tags$head(tags$style(".inactiveLink { pointer-events: visible; cursor: not-allowed; }"))``` — SBista, Jun 10 '21 at 03:39

score 1 · Answer 2 · edited Dec 09 '21 at 04:23

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

Disable/Enable click on dashboard sidebar in shiny

2 Answers2

Linked