Toggle shinydashboard menuItems based on input parameters - shiny

Question

I am building a large shinydashboard app that can take two kinds of data, monthly or interval. Some tabs should be shown when "Monthly" is selected from a dropdown and hidden when "Interval" is selected (and vice versa).
I tried assigning two classes, "OnlyMonthly" and "OnlyInterval," to the relevant menuItem()s by wrapping them in div() tags, and then using shinyJS's toggle() command to show ".OnlyMonthly" when "Monthly" is selected and to hide ".OnlyInterval," but the formatting of the menu is affected and it doesn't work.
Here's the code for a basic app:
require(shiny)
require(shinydashboard)
require(shinyjs)
ui <- dashboardPage(
header = dashboardHeader(title = 'Toggle Menu'),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem('Item 1', tabName = 'item1',
menuSubItem('Item A', tabName = 'item1A'),
# just hide Item B
div(menuSubItem('Item B', tabName = 'item1B'), class = 'OnlyMonthly')
),
# hide all of Item 2, including C and D
div(class = 'OnlyInterval',
menuItem('Item 2', tabName = 'item2',
menuSubItem('Item C', tabName = 'item2C'),
menuSubItem('Item D', tabName = 'item2D')
)
)
)
),
body = dashboardBody(
useShinyjs(),
selectInput(inputId = 'monthly_vs_interval', label = 'Data type',choices = c('Monthly','Interval'))
)
)
server <- shinyServer(function(input, output, session) {
observe({
toggle(selector = ".OnlyMonthly", input$monthly_vs_interval == 'Monthly')
toggle(selector = ".OnlyInterval", input$monthly_vs_interval == 'Interval')
})
})
shinyApp(ui = ui, server = server)

Answer 1

After testing, I found that conditionalPanel properly shows/hides the tabs but the formatting is still affected. It seems sidebarMenu only allows menuItems as childs and the same is true for menuItem and menuSubItem. You can probably hide the menuItem via it's id (see ?menuItem) but there might be no way to show/hide menuSubItems without affecting the formatting.
require(shiny)
require(shinydashboard)
ui <- dashboardPage(
header = dashboardHeader(title = 'Toggle Menu'),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem('Item 1', tabName = 'item1',
menuSubItem('Item A', tabName = 'item1A'),
# just hide Item B
conditionalPanel(menuSubItem('Item B', tabName = 'item1B'),
condition = "input.monthly_vs_interval == 'Monthly'")
),
# hide all of Item 2, including C and D
conditionalPanel(condition = "input.monthly_vs_interval == 'Interval'",
menuItem('Item 2', tabName = 'item2',
menuSubItem('Item C', tabName = 'item2C'),
menuSubItem('Item D', tabName = 'item2D')
)
)
)
),
body = dashboardBody(
selectInput(inputId = 'monthly_vs_interval', label = 'Data type',
choices = c('Monthly', 'Interval'))
)
)
server <- function(...){}
shinyApp(ui = ui, server = server)
Edit: Actually, only sidebarMenu has an id argument. Using an argument named id in menuSubItem leads to a syntax error and using show/hide via id for menuItems leads to unexpected results. I guess you can always code it the "dirty" way by using conditionalPanel outside of the sidebarMenu. Note however, that this approach is kind of WET.
require(shiny)
require(shinydashboard)
ui <- dashboardPage(
header = dashboardHeader(title = 'Toggle Menu'),
sidebar = dashboardSidebar(
conditionalPanel(
condition = "input.monthly_vs_interval == 'Monthly'",
sidebarMenu(menuItem(
'Item 1', tabName = 'item1',
menuSubItem('Item A', tabName = 'item1A'),
menuSubItem('Item B', tabName = 'item1B')
))
),
conditionalPanel(
condition = "input.monthly_vs_interval == 'Interval'",
sidebarMenu(
menuItem('Item 1', tabName = 'item1',
menuSubItem('Item A', tabName = 'item1A')
),
menuItem('Item 2', tabName = 'item2',
menuSubItem('Item C', tabName = 'item2C'),
menuSubItem('Item D', tabName = 'item2D')
)
)
)
),
body = dashboardBody(
selectInput(inputId = 'monthly_vs_interval', label = 'Data type',
choices = c('Monthly', 'Interval'))
)
)
server <- function(...){}
shinyApp(ui = ui, server = server)