Using menuSubItem to organize inputs - r

Question

I'm trying to use the menuSubItem functions to organize my inputs since I'll have a lot. What I'm finding though is that the conditional Panel is minimizing the whole menuItem and not expanding them. And what I'm also seeing is that the body doesn't change when I click on different tabs. Am I using conditionalPanels right?
library(needs)
needs(
shiny,
ggplot2,
tidyverse,
shinydashboard,
DT,
shinycssloaders,
plotly
)
# Define UI for application that draws a histogram
header = dashboardHeader(
# tags$li(class = "dropdown",
# tags$style(".main-header {max-height: 80px}"),
# tags$style(".main-header .logo {height: 80px}")),
#title = tags$img(src='logo.png',height='100',width='200')
)
sidebar = dashboardSidebar(
sidebarMenu(
id = 'panelsbar',
style = '"overflow-y:auto; max-height: 600px; position:relative;"',
menuItem('Data Input', tabName = 'data'),
conditionalPanel(
condition = "input.panelsbar== 'data'",
fileInput(
"file",
"Upload CSV files",
multiple = TRUE,
accept = ("text/comma")
)
),
menuItem('Simulate',tabName = 'sim_tab',
helpText('Adjust Simulation Parameters'),
menuSubItem('Promotion Parameters', tabName = 'promo'),
useShinyjs(),
div(id = 'sidebar_promo',
conditionalPanel("input.panelsbar==='promo'",
radioButtons('promoType',label = 'Promotion Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.promoType==="Aggregated"',
sliderInput('promoAll','Set promotion rate:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel('input.promoType==="Role Defined"',
helpText('Set Promotion Rates for each role'),
sliderInput(
'promoRole1','Role 1:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole2','Role 2:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole3','Role 3:', value = 25,min = 0, max = 100, step = 5),
sliderInput(
'promoRole4', 'Role 4:', value = 25, min = 0, max = 100,step = 5)
)
)),
menuSubItem('Candidate Slates', tabName = 'hire'),
div(id='sidebar_hire',
conditionalPanel("input.panelsbar==='hire'",
radioButtons('hireType',label = 'Candidate Slate Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.hireType==="Aggregated"',
sliderInput('hireAll','Set candidate slate rates:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel('input.promoType==="Role Defined"',
helpText('Set the Candidate Slate Diversity'),
h5('0 = Females, 100 = Males'),
sliderInput(
'hireRole1',
'Role 1:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole2',
'Role 2:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole3',
'Role 3:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole4',
'Role 4:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole5',
'Role 5:',
value = 25,
min = 0,
max = 100,
step = 5
)
))),
menuSubItem('Turnover Rates', tabName = 'turnover'),
div(id='sidebar_turnover',
conditionalPanel("input.panelsbar==='turnover'",
radioButtons('turnoverType',label = 'Turnover Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.turnoverType==="Aggregated"',
sliderInput('turnoverAll','Set turnover rate:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel(
"input.turnoverType==='Role Defined'",
helpText('Set the turnover rate for each role'),
sliderInput(
'turnoverRole1',
'Role 1:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole2',
'Role 2:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole3',
'Role 3:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole4',
'Role 4:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole5',
'Role 5:',
value = 25,
min = 0,
max = 100,
step = 5
)
))
)),
actionButton('go','Run')
))
body <- dashboardBody(
tabItems(
tabItem(
tabName = 'data',
wellPanel(DT::dataTableOutput('table'))),
tabItem(
tabName = 'sim_tab',
fluidRow(h2('Average of Distribution',align = 'center')),
fluidRow(h5('Below is a table of the average distribution from the simulation',align='center')),
fluidRow(
wellPanel(
DT:::dataTableOutput('simDataTable') %>%
withSpinner(color="#ee1100")
),
fluidRow(h2('Average of Distribution',align = 'center')),
fluidRow(
wellPanel(
plotlyOutput('simPlot')
)
))
)
))
ui = shinydashboard::dashboardPage(header, sidebar, body, skin = 'red',
tags$head(tags$style(
HTML(".sidebar {
height: 90vh; overflow-y: auto;
}")
)))

Answer 1

There is no need to use conditionalPanel for the initial menuItem. You can try this...
shinydashboard::dashboardSidebar(width=300,
useShinyjs(),
sidebarMenu(id = "panelsbar",
#style = '"overflow-y:auto; max-height: 600px; position:relative;"',
menuItem("Home", tabName = "home", icon = icon("home")),
menuItem('Data Input', # tabName = 'data1' ,
#conditionalPanel( condition = "input.panelsbar== 'data'",
menuSubItem(
fileInput(
"file",
"Upload CSV files",
multiple = TRUE,
accept = ("text/comma")
),tabName = 'data' )
),
menuItem("Simulate", tabName = 'sim_tab',
helpText('Adjust Simulation Parameters'),
menuItem("Promotion Parameters", tabName = 'promo' ,
# div(id = 'sidebar_promo',
# conditionalPanel("input.panelsbar==='promo'",
radioButtons('promoType', label = 'Promotion Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.promoType==="Aggregated"',
sliderInput('promoAll','Set promotion rate:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel('input.promoType==="Role Defined"',
helpText('Set Promotion Rates for each role'),
sliderInput(
'promoRole1','Role 1:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole2','Role 2:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole3','Role 3:', value = 25,min = 0, max = 100, step = 5),
sliderInput(
'promoRole4', 'Role 4:', value = 25, min = 0, max = 100,step = 5)
)
#)
#),
), ## new line
menuItem('Candidate Slates', tabName = 'hire'),
...