remove toggle gear icon controlbar

user_8864308 0
Viewed 138

I'm trying to customize how my R shiny app looks like and playing around with various elements on the page.

Just wondering how do I remove this toggle icon from the header? I've tried something like this but it doesn't work:

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

enter image description here

reproducible example:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
library(DT)

ui <- shinydashboardPlus::dashboardPage(
  options = list(sidebarExpandOnHover = TRUE),
   header = dashboardHeader(
    tags$li(
      id = 'right-sidebar-toggle-list-item',
      class = "dropdown",
      actionLink("rightSidebarToggle", "Select Population"))
    
  ),
  shinydashboardPlus::dashboardSidebar( disable = TRUE ,
                                        sidebarMenu(
                                          selectInput(
                                            "countries", label = "Select Countries",
                                            choices = c("B", "C", "A"), selected = "A",
                                            multiple = TRUE
                                          ))
  ),# minified = TRUE, collapsed = F),
  controlbar = shinydashboardPlus::dashboardControlbar(id = "controlbar", collapsed = F, 
                                                       skin = "dark",
                                                       controlbarMenu(
                                                         id = "menu",
                                                         controlbarItem(
                                                           "Tab 1",
                                                           "Welcome to tab 1"
                                                         ),
                                                         controlbarItem(
                                                           "Tab 2",
                                                           "Welcome to tab 2"
                                                         )
                                                       )
  ),
  
  shinydashboard::dashboardBody(
    useShinyjs(),
    tabsetPanel( id="tabset",
                 tabPanel("Resource Allocation", value="tab1", plotOutput("plot")),
    )
  ),
  # controlbar = dashboardControlbar(collapsed = F),
  title = "DashboardPage"
)
server <- function(input, output) {
  output$plot <- renderPlot(plot(cars))
  
}

shinyApp(ui, server)
shinydashboard shiny r
1 Answers

We can use some JS via tags$script to hide the icon:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
library(DT)

ui <- shinydashboardPlus::dashboardPage(
  options = list(sidebarExpandOnHover = TRUE),
  shinydashboardPlus::dashboardHeader(
    tags$li(
      id = 'right-sidebar-toggle-list-item',
      class = "dropdown",
      actionLink("rightSidebarToggle", "Select Population"))
    
  ),
  shinydashboardPlus::dashboardSidebar(disable = TRUE ,
                                       sidebarMenu(
                                         selectInput(
                                           "countries",
                                           label = "Select Countries",
                                           choices = c("B", "C", "A"),
                                           selected = "A",
                                           multiple = TRUE
                                         )
                                       )),
  # minified = TRUE, collapsed = F),
  controlbar = shinydashboardPlus::dashboardControlbar(
    id = "controlbar",
    collapsed = F,
    skin = "dark",
    controlbarMenu(
      id = "menu",
      controlbarItem("Tab 1",
                     "Welcome to tab 1"),
      controlbarItem("Tab 2",
                     "Welcome to tab 2")
    )
  ),
  shinydashboard::dashboardBody(
    useShinyjs(),
    # hide icon
    # tags$script(
    #   HTML(
    #     'var e = document.querySelector("body > div.wrapper > header > nav > div:nth-child(4) > ul > li > a > i");
    #        e.setAttribute("style", "display: none;");'
    #   )
    # ),
    # hide hyperlink
    tags$script(HTML('var e = document.querySelector("body > div.wrapper > header > nav > div:nth-child(4) > ul > li:last-child > a");
                      e.setAttribute("style", "display: none;");')),
    tabsetPanel(
      id = "tabset",
      tabPanel("Resource Allocation", value = "tab1", plotOutput("plot")),
    )
  ),
  # controlbar = dashboardControlbar(collapsed = F),
  title = "DashboardPage"
)

server <- function(input, output) {
  output$plot <- renderPlot(plot(cars))
}

shinyApp(ui, server)
user_98413890
Related