Remove icon which displays or hides the left sidebar in shinydashboard for a certain tabPanel

Question

I have the shiny dashboard below in which I would like to hide the icon in the left part of the header which if pushed hides or display the left sidebar. Is that possible to hide it only when Im in the "Front" tab?

# app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
library(shinyjs)

dbHeader <- dashboardHeaderPlus(
                            enable_rightsidebar = TRUE,
                            rightSidebarIcon = "gears",
                            fixed = T
                            )

ui <- dashboardPagePlus(
  dbHeader,
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    tags$hr(),
    tabsetPanel(
      id ="tabA",
      type = "tabs",
      tabPanel("Front",icon = icon("accusoft")),
      tabPanel("Data", icon = icon("table")
      )
    )
  ),
  rightsidebar = rightSidebar()
)

server <- function(input, output) {
  observe({
    if (input$tabA == "Front") {
      hide(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
      addClass(selector = "body", class = "sidebar-collapse")
      removeClass(selector = "body", class = "control-sidebar-open")
    } else {
      show(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
      removeClass(selector = "body", class = "sidebar-collapse")
      addClass(selector = "body", class = "control-sidebar-open")
    }
  })
}

shinyApp(ui = ui, server = server)

Answer 1

If you only want to hide the icon you can do this with the help of some Javascript code. In order to insert the JS code in Shiny, one must use tags$script() .

So in order to hide the icon, insert below code inside dashboardBody()

   # Note: 'sidebar-toggle' is a class name (i.e. HTML class attribute) of Shiny icon 
   tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),

And the output is:

More on inserting JS in Shiny can be found here: https://shiny.rstudio.com/articles/packaging-javascript.html

UPDATED

If you want to hide the icon only when the user is in the "Front" tab you can do this again by inserting some JS code, but this time you can insert it inside server side part (ie inside your observe function).

So you need to insert the JS part which will hide the icon if tab "Front" is pressed

  shinyjs::runjs("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';")

and the part which will show the icon, if tab "Data" is pressed

  shinyjs::runjs("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'visible';")

So your whole code looks like this

# app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
library(shinyjs)

dbHeader <- dashboardHeaderPlus(
  enable_rightsidebar = TRUE,
  rightSidebarIcon = "gears",
  fixed = T
)

ui <- dashboardPagePlus(
  dbHeader,
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    tags$hr(),
    tabsetPanel(
      id ="tabA",
      type = "tabs",
      tabPanel("Front",icon = icon("accusoft")),
      tabPanel("Data", icon = icon("table")
      )
    )
  ),
  rightsidebar = rightSidebar()
)

server <- function(input, output) {
  observe({
    if (input$tabA == "Front") {
      hide(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
      addClass(selector = "body", class = "sidebar-collapse")
      removeClass(selector = "body", class = "control-sidebar-open")
      shinyjs::runjs("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';")


    } else {
      show(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
      removeClass(selector = "body", class = "sidebar-collapse")
      addClass(selector = "body", class = "control-sidebar-open")
      shinyjs::runjs("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'visible';")

    }
  })
}

shinyApp(ui = ui, server = server)