Show content for menuItem when menuSubItems exist in Shiny Dashboard
Much credit goes to this question React to menuItem() tab selection
. The only annoying thing is that you would have to click on the Charts
tab again but I think that should be fine
library(shiny)
library(shinydashboard)
convertMenuItem <- function(mi,tabName) {
mi$children[[1]]$attribs['data-toggle']="tab"
mi$children[[1]]$attribs['data-value'] = tabName
if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
mi$attribs$class=NULL
}
mi
}
header <- dashboardHeader()
sidebar <- dashboardSidebar(
sidebarUserPanel("Pork Chop",
subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
# Image file should be in www/ subdir
image = "https://vignette.wikia.nocookie.net/fanfictiondisney/images/9/9e/Pumba_3.jpg/revision/latest?cb=20120708163413"
),
sidebarSearchForm(label = "Enter a number", "searchText", "searchButton"),
sidebarMenu(
# Setting id makes input$tabs give the tabName of currently-selected tab
id = "tabs",
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new", badgeColor = "green"),
convertMenuItem(menuItem("Charts", tabName = "charts",icon = icon("bar-chart-o"),selected=T,
menuSubItem("Sub-item 1", tabName = "subitem1"),
menuSubItem("Sub-item 2", tabName = "subitem2")),"charts")
)
)
body <- dashboardBody(
tabItems(
tabItem("dashboard",div(p("Dashboard tab content"))),
tabItem("widgets","Widgets tab content"),
tabItem("charts","Charts Tab"),
tabItem("subitem1","Sub-item 1 tab content"),
tabItem("subitem2","Sub-item 2 tab content")
)
)
shinyApp(
ui = dashboardPage(header, sidebar, body),
server = function(input, output) { }
)
Coming from here. This is an alternative approach showing a hidden, childless menuItem
associated with a tabItem
, once the childful menuItem
is expanded.
Two advantages over @PorkChop's current solution are, that input$sidebarItemExpanded
remains functional (doesn't get updated when using convertMenuItem
) and there is no second click needed to expand the menu.
library(shiny)
library(shinydashboard)
library(shinyjs)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
id = "sidebarID",
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", icon = icon("th"), tabName = "widgets"),
menuItem("Charts", id = "chartsID", tabName = "charts", icon = icon("bar-chart-o"), expandedName = "CHARTS",
menuSubItem("Sub-item 1", tabName = "subitem1"),
menuSubItem("Sub-item 2", tabName = "subitem2")
),
hidden(menuItem("hiddenCharts", tabName = "hiddenCharts"))
)
),
dashboardBody(
useShinyjs(),
tabItems(
tabItem("dashboard", "Dashboard tab content"),
tabItem("widgets", "Widgets tab content"),
tabItem("hiddenCharts", "Charts Tab"),
tabItem("subitem1", "Sub-item 1 tab content"),
tabItem("subitem2", "Sub-item 2 tab content")
)
)
)
server <- function(input, output, session) {
observeEvent(input$sidebarItemExpanded, {
if(input$sidebarItemExpanded == "CHARTS"){
updateTabItems(session, "sidebarID", selected = "hiddenCharts")
}
})
}
shinyApp(ui, server)
PS: Here and here related GitHub issues can be found.
If you want to expand / collapse menuItem
's in the sidebar when using updateTabItems
please check this.