remove toggle gear icon controlbar - r

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';")
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)

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)

Related

conditionalpanel in shiny tabBox

In the following shiny app I would like to have the second tab inside the box if user selection is sh, So I was expecting the conditionalPanel command does the trick ! but it is not working:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
skin = "green",
dashboardHeader(title = "conditional tabBox"),
dashboardSidebar(
width = 250,
sidebarMenu(
id = "tabs",
radioButtons(inputId = "layout_status",
label = "",
inline = TRUE,
choices = c("Layout" = "ly","Shape file" = "sh"),
selected = "ly")
)
),
dashboardBody(
tabBox(width = 12,
tabPanel(
id = "p1",
title = HTML("<p style='color:#2071B5'><b>TAB 1</b></p>")
),
conditionalPanel(condition = " input.layout_status=='sh' ",
tabPanel(
id = "p2",
title = HTML("<p style='color:#2071B5'><b>TAB 2</b></p>")
)
)
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
tabBox expects tabPanel elements to be passed to its ... argument - conditionalPanel elements are not allowed.
However you can use hideTab / showTab instead:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
skin = "green",
dashboardHeader(title = "conditional tabBox"),
dashboardSidebar(
width = 250,
sidebarMenu(
id = "tabs",
radioButtons(inputId = "layout_status",
label = "",
inline = TRUE,
choices = c("Layout" = "ly","Shape file" = "sh"),
selected = "ly")
)
),
dashboardBody(
tabBox(
tabPanel(
value = "p1",
title = HTML("<p style='color:#2071B5'><b>TAB 1</b></p>")
),
tabPanel(
value = "p2",
title = HTML("<p style='color:#2071B5'><b>TAB 2</b></p>")
),
id = "tabBoxID", width = 12)
)
)
server <- function(input, output, session) {
observeEvent(input$layout_status, {
if(input$layout_status == 'sh'){
showTab(inputId = "tabBoxID", target = "p2", select = TRUE)
} else {
hideTab(inputId = "tabBoxID", target = "p2")
}
})
}
shinyApp(ui, server)

toggle controlbar based on tab and action button

I'm trying to toggle the control bar using an actionLink in the top right (to basically copy what the gears icon is doing, and later I will remove the gears icon to just have one actionLink) and also to automate the toggling such that when the user clicks on feedback, the controlbar disappears and reappears when the user clicks on any other tab. I also want to make sure throughout this toggling, the controlbar does not overlay on the dashboard body (basically the dashboard body will resize appropriately whenever the control bar toggles).
This is what I've tried so far:
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
library(shinyjs)
ui <- dashboardPage(
title = 'Test',
header = dashboardHeader(
title = span("Test"),
titleWidth = 600,
tags$li(
id = 'right-sidebar-toggle-list-item',
class = "dropdown",
actionLink("rightSidebarToggle", "Select Population"))
), # end of dashboardheader
sidebar = dashboardSidebar(
sidebarMenu(id = "sidebar",
menuItem("Overview", tabName = "introduction", icon = icon("info")),
menuItem("Feedback", tabName = "feedback", icon = icon("info")))),
body = dashboardBody(plotOutput("cars")),
controlbar = dashboardControlbar(
id = "controlbar",
width = 270,
skin = "light",
collapsed = F,
overlay = F,
controlbarMenu(
id = "menu",
controlbarItem(
' ',
# - select study
checkboxGroupButtons(
inputId = "select_study",
label = "Select Study",
choiceNames = c("1", "2"),
choiceValues = c("1", "2"),
selected = c("1", "2"),
justified = TRUE,
status = "primary",
direction = "vertical",
checkIcon = list(yes = icon("ok", lib = "glyphicon"))
),
)
)
)
)
server <- function(input, output, session) {
output$cars <- renderPlot({
plot(mtcars)
})
# event to toggle right sidebar menu
observeEvent(input$rightSidebarToggle, {
shinyjs::toggleClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
})
##### > Controlbar Collapse #####
observeEvent(input[["sidebar"]], {
if(input[["sidebar"]] == "feedback"){
removeClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
}else{
addClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
updateControlbar("controlbar")
}
})
}
shinyApp(ui, server)
There is no need to create a new actionLink and hide the existing a-tag. We can simply modify it.
Please check the following:
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
library(shinyjs)
ui <- dashboardPage(
title = 'Test',
header = dashboardHeader(
title = span("Test"),
titleWidth = 600,
controlbarIcon = NULL
),
sidebar = dashboardSidebar(sidebarMenu(
id = "sidebar",
menuItem("Overview", tabName = "introduction", icon = icon("info")),
menuItem("Feedback", tabName = "feedback", icon = icon("info"))
)),
body = dashboardBody(
useShinyjs(),
tags$script(
HTML(
"var el = document.querySelector('body > div > header > nav > div:nth-child(4) > ul > li:last-child > a');
el.innerHTML = 'Select Population';"
)
),
plotOutput("cars")
),
controlbar = dashboardControlbar(
id = "controlbar",
width = 270,
skin = "light",
collapsed = FALSE,
overlay = FALSE,
controlbarMenu(id = "menu",
controlbarItem(' ',
checkboxGroupButtons(
inputId = "select_study",
label = "Select Study",
choiceNames = c("1", "2"),
choiceValues = c("1", "2"),
selected = c("1", "2"),
justified = TRUE,
status = "primary",
direction = "vertical",
checkIcon = list(yes = icon("ok", lib = "glyphicon"))
)
)
)
)
)
server <- function(input, output, session) {
output$cars <- renderPlot({
plot(mtcars)
})
observeEvent(input[["sidebar"]], {
if (input[["sidebar"]] == "feedback") {
removeClass(selector = "body", class = "control-sidebar-open")
shinyjs::runjs('Shiny.setInputValue(id = "controlbar", value = false);
$(window).trigger("resize");')
} else {
addClass(selector = "body", class = "control-sidebar-open")
shinyjs::runjs('Shiny.setInputValue(id = "controlbar", value = true);
$(window).trigger("resize");')
}
}, ignoreInit = FALSE)
}
shinyApp(ui, server)
Edit: Here is an UI-only approach not using library(shinyjs):
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
ui <- dashboardPage(
title = 'Test',
header = dashboardHeader(
title = span("Test"),
titleWidth = 600,
controlbarIcon = NULL
),
sidebar = dashboardSidebar(sidebarMenu(
id = "sidebar",
menuItem("Overview", tabName = "introduction", icon = icon("info")),
menuItem("Feedback", tabName = "feedback", icon = icon("info"))
)),
body = dashboardBody(
tags$script(
HTML(
"var el = document.querySelector('body > div > header > nav > div:nth-child(4) > ul > li:last-child > a');
el.innerHTML = 'Select Population';
$(document).on('shiny:connected', function(event) {
$(window).trigger('resize'); // resize once on session start - needed when using collapsed = FALSE
});
$(document).on('shiny:inputchanged', function(event) {
if (event.name === 'sidebar') {
if (event.value === 'feedback') {
document.querySelector('body').classList.remove('control-sidebar-open');
Shiny.setInputValue(id = 'controlbar', value = false);
$(window).trigger('resize');
} else {
document.querySelector('body').classList.add('control-sidebar-open');
Shiny.setInputValue(id = 'controlbar', value = true);
$(window).trigger('resize');
}
}
});"
)
),
plotOutput("cars")
),
controlbar = dashboardControlbar(
id = "controlbar",
width = 270,
skin = "light",
collapsed = FALSE,
overlay = FALSE,
controlbarMenu(id = "menu",
controlbarItem(' ',
checkboxGroupButtons(
inputId = "select_study",
label = "Select Study",
choiceNames = c("1", "2"),
choiceValues = c("1", "2"),
selected = c("1", "2"),
justified = TRUE,
status = "primary",
direction = "vertical",
checkIcon = list(yes = icon("ok", lib = "glyphicon"))
)
)
)
)
)
server <- function(input, output, session) {
output$cars <- renderPlot({
plot(mtcars)
})
}
shinyApp(ui, server)

Hide and show sidebars based on chosen tabPanel in shinydashboard

I have the shinydashboard below in which I have 3 tabPanels. In the 1st tabPanel "Resource Allocation" I want the left and right sidebar open by default. In the 2nd and 3rd tabpanels ("Time Series","Longitudinal View") I want only left sidebar and the right sidebar not just hidden but to not be able to open at all by pushing the "gears" icon above it which should be removed. And in the fourth panel "User Guide" I want no sidebar and no choise to open one of them at all.
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
shinyApp(
ui = dashboardPage(
options = list(sidebarExpandOnHover = TRUE),
header = dashboardHeader(
titleWidth = "0px"
),
sidebar = dashboardSidebar(minified = TRUE, collapsed = F),
body = dashboardBody(
useShinyjs(),#tags$head(tags$script(src="format_number.js")),
tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),
tabsetPanel(
tabPanel("Resource Allocation"),
tabPanel("Time Series"),
tabPanel("Longitudinal View"),
tabPanel("User Guide")
)
),
controlbar = dashboardControlbar(collapsed = F),
title = "DashboardPage"
),
server = function(input, output) { }
)
I have a solution for the left sidebar. I am sure you can spend sometime and figure out the solution for the right sidebar. Please note that this requires some more work to fine tune to your needs. Try this
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
library(DT)
ui <- shinydashboardPlus::dashboardPage(
options = list(sidebarExpandOnHover = TRUE),
shinydashboardPlus::dashboardHeader(
#titleWidth = "0px"
),
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")),
tabPanel("Time Series", value="tab2", plotOutput("plot2")),
tabPanel("Longitudinal View", value="tab3", DTOutput("ir")),
tabPanel("User Guide", value="tab4", DTOutput("mt"))
)
),
# controlbar = dashboardControlbar(collapsed = F),
title = "DashboardPage"
)
server <- function(input, output) {
output$plot <- renderPlot(plot(cars))
output$plot2 <- renderPlot(plot(pressure))
output$mt <- renderDT(mtcars)
output$ir <- renderDT(iris)
observeEvent(input[["tabset"]], {
if(input[["tabset"]] == "tab4"){
addClass(selector = "body", class = "sidebar-collapse")
updateControlbar("controlbar")
}else{
removeClass(selector = "body", class = "sidebar-collapse")
}
})
}
shinyApp(ui, server)

selectInput reactive value in shinyDashboard sidebar of R shiny app remains Null

It appears the input value of a selectInput object is not updating. I have inserted one in the sidebar menu. I am using shinyDashboard. here is my code.
header & Sidebar
header <-
dashboardHeader(
title = "REPORT",
tags$li(class = "dropdown",
tags$style(
HTML(
"#import url('//fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Open+Sans:400,700|Montserrat:400,700');"
)
)),
disable = FALSE,
titleWidth = '200'
)
header$children[[3]]$children[[3]] <-
tags$h1("DATABASE",
# align = 'left',
style = "color:#FFFFFF; font-weight: bold; font-family: 'Open Sans','Libre Baskerville',Montserrat, serif;font-size: 23px;")
data_type_list<-c('in vivo','in vitro','pbpk')
siderbar <- dashboardSidebar(
width = 200,
sidebarMenu(
id = 'sidebar',
style = "position: relative; overflow: visible;",
menuItem(
"TK Knowlegebase",
tabName = 'tk',
icon = icon('database'),
badgeColor = "teal",
#radioButtons("tk_data_type", "Select Data Type:",data_type_list)
selectInput('tk_data_type',"Select Data Type",data_type_list, selected=1)
)
)
)
body
body <- dashboardBody(width = 870,
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
),
#theme = shinythemes::shinytheme("darkly"),
tabItems(
tabItem (
tabName = "tk",
mainPanel(
#in vivo ----
conditionalPanel(
condition ="input.tk_data_type== 'in vivo'",
tags$h2('vivo')
),
# in vitro ----
conditionalPanel(
condition="input.tk_data_type== 'in vitro'",
tags$h2('vitro')
)
,
# pbpk ----
conditionalPanel(
condition="input.tk_data_type== 'pbpk'",
tags$h2('pbpk')
)
)))
server = function(input, output, session) {
observe({input$tk_data_type})
}
ui <- dashboardPage(title = 'ARC Toxkin App', skin = 'purple',
header, siderbar, body)
shiny::shinyApp(ui = ui, server = server)
I even attempted to use observe({input$tk_data_type}) in the server section to no success.
What I obtain is a blank page. what I wish to see is content from dashboardBody() appear.
Thank you for your time
UPDATE
This is a short-term fix solution, thanks to user YBS.
vitro_tabset<-tabsetPanel(
tabPanel("Detailed",
"This is a test"),
tabPanel("Phys-chem",
"This is a test"),
tabPanel("Exploratory",
"This is a test"),
tabPanel("Downloads",
"This is a test")
)
vivo_tabset<-tabsetPanel(
tabPanel("Detailed",
"This is a test"),
tabPanel("Phys-chem",
"This is a test"),
tabPanel("Exploratory",
"This is a test"),
tabPanel("Downloads",
"This is a test")
)
siderbar <- dashboardSidebar(
sidebarMenu(
id = 'sidebar',
menuItem(
"TK Knowlegebase",
tabName = 'tk',
icon = icon('database'),
badgeColor = "teal",
selected = TRUE,
startExpanded = TRUE,
#radioButtons("tk_data_type2", "Select Data Type:",data_type_list),
menuSubItem('vivo', tabName = 'vivo', icon = shiny::icon("angle-double-right"), selected = NULL),
menuSubItem('vitro', tabName = 'vitro', icon = shiny::icon("angle-double-right"), selected = TRUE),
menuSubItem('pbpk', tabName = 'pbpk', icon = shiny::icon("angle-double-right"), selected = NULL)
)
)
)
body <- dashboardBody(width = 870,
tabItems(
tabItem (tabName = "vivo",
vivo_tabset),
tabItem(tabName='vitro',
# in vitro ----
vitro_tabset),
# pbpk ----
tabItem(tabName='pbpk')
It appears that tabItems() and tabItem() don't work well in your program as the sidebarmenu requires minor tweaking. Also, you don't need mainPanel. Try this
data_type_list <- c("in vivo","in vitro","pbpk")
ui <- shinydashboard::dashboardPage(title = "ARC Toxkin App", skin = "purple",
shinydashboard::dashboardHeader(
title = "REPORT" ,
tags$li(class = "dropdown",
tags$style(
HTML(
"#import url('//fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Open+Sans:400,700|Montserrat:400,700');"
)
)),
disable = FALSE,
titleWidth = '200'
),
shinydashboard::dashboardSidebar(width = 220,
useShinyjs(),
sidebarMenu(
id = "tabs",
style = "position: relative; overflow: visible;",
menuItem("TK Knowlegebase", tabName="tk", icon = icon("bar-chart-o"),
menuSubItem("TK Knowlegebase1", tabName = "tk1", icon = icon('database')),
selectInput("tk_data_type", label="Select Data Type", choices = data_type_list, selected=1),
menuSubItem("TK Knowlegebase2", tabName = "tk2", icon = icon('database'))
#radioButtons("tk_data_type2", "Select Data Type:",data_type_list)
)
)
),
shinydashboard::dashboardBody( #width = 870,
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"),
),
#theme = shinythemes::shinytheme("darkly"),
tabItems(
#tabItem(tabName = "tk", headerPanel('First')),
tabItem(tabName = "tk1",
fluidRow(
shinydashboard::box(title = "Graphics Package", width = 12, solidHeader = TRUE, status="info",
## vivo
conditionalPanel(
condition = "input.tk_data_type == 'in vivo'",
tags$h2(' vivo')
),
## in vitro
conditionalPanel(
condition = "input.tk_data_type == 'in vitro'",
tags$h2(' vitro')
),
## pbpk
conditionalPanel(
condition = "input.tk_data_type == 'pbpk'",
tags$h2(' pbpk')
),
verbatimTextOutput("tb1"),
DTOutput("tb2")
))
),
tabItem(tabName = "tk2", headerPanel('Last'), DTOutput("tb3")
#verbatimTextOutput("tb4")
)
)
)
)
server <- function(input, output, session) {
output$tb3 <- renderDT(mtcars)
output$tb2 <- renderDT(iris)
output$tb1 <- renderPrint({input$tk_data_type})
output$tb4 <- renderPrint({input$tk_data_type2})
}
shinyApp(ui, server)

Show output of dashboardBody when rightSidebarTabContent id selected in shinyDashboard

How I am able to show the output of dashboardBody when the id of rightSidebarTabContent selected. If id = "tab_1", selected, show the verbatimTextOutput("tab1") and so on. I used shinyjs::show and shinyjs::hide, but it's not working. Any suggestion?
library(shiny)
library(shinydashboard)
library(shinyjs)
ui <- dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
rightsidebar = rightSidebar(
id = "right_sidebar",
background = "dark",
rightSidebarTabContent(
id = "tab_1",
title = "Tab 1",
icon = "desktop",
active = TRUE,
sliderInput(
"obs",
"Number of observations:",
min = 0, max = 1000, value = 500
)
),
rightSidebarTabContent(
id = "tab_2",
title = "Tab 2",
textInput("caption", "Caption", "Data Summary")
),
rightSidebarTabContent(
id = "tab_3",
icon = "paint-brush",
title = "Tab 3",
numericInput("obs", "Observations:", 10, min = 1, max = 100)
)
),
dashboardBody(
div(id = "tab1_out", verbatimTextOutput("tab1")),
div(id = "tab2_out", verbatimTextOutput("tab2")),
div(id = "tab3_out", verbatimTextOutput("tab3"))
)
)
server <- function(input, output) {
output$tab1 <- renderPrint({
"tab1"
})
output$tab2 <- renderPrint({
"tab2"
})
output$tab3 <- renderPrint({
"Tab3"
})
observeEvent(input$right_sidebar,{
if(input$right_sidebar == "tab_1"){
shinyjs::show("tab1_out")
shinyjs::hide("tab2_out")
shinyjs::hide("tab3_out")
}else if(input$right_sidebar == "tab_2"){
shinyjs::hide("tab1_out")
shinyjs::show("tab2_out")
shinyjs::hide("tab3_out")
}else{
shinyjs::hide("tab1_out")
shinyjs::hide("tab2_out")
shinyjs::show("tab3_out")
}
})
}
shinyApp(ui, server)
I am not sure that you can hide and show the body content from right sidebar. However, you can control the outputs in display page. The code below shows that the body content is still controlled by left sidebar, but the plot display can be changed from the right sidebar. For each tabPanel, you can either choose to have a right sidebar or not.
library(shiny)
library(shinydashboard)
library(shinyjs)
library(shinydashboardPlus)
library(ggplot2)
header <- dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
)
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("Section A", tabName = "Section_A", icon = icon("map")),
menuItem("Section B", tabName = "Section_B", icon = icon("chart-line")),
menuItem("Section C", tabName = "Section_C", icon = icon( "gears")),
id = "nav"
)
)
rightsidebar <- rightSidebar(
shiny::tags$head(shiny::tags$style(shiny::HTML(
".control-sidebar-tabs {display:none;}
.tabbable > .nav > li > a:hover {background-color: #333e43; color:white}
.tabbable > .nav > li[class=active] > a {background-color: #222d32; color:white}"))),
# '{display:none;}' removes empty space at top of rightsidebar
background = "dark",
uiOutput("side_bar"),
title = "Right Sidebar"
)
body <- dashboardBody(
tabItems(
tabItem(
tabName = "Section_A",
p("Some content for section A"),
tabPanel(id = "tab_1o", "Tab 1 for Section A", verbatimTextOutput("tab1"), plotOutput("plot1")),
),
tabItem(
tabName = "Section_B",
p("Some content for section B"),
tabPanel(id = "tab_2o", "Tab 2 for Section B", verbatimTextOutput("tab2"), DTOutput("data2") ),
),
tabItem(
tabName = "Section_C",
p("Some content for section C"),
tabPanel(id = "tab_3o", "Tab 3 for Section C", verbatimTextOutput("tab3"), plotOutput("plot3"))
)
),
tags$script(
'$("a[data-toggle=\'tab\']").click(function(){
Shiny.setInputValue("tabactive", $(this).data("value"))
})'
)
)
ui <- tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus( ## keep the right sidebar open permanently
#ui <- dashboardPagePlus(
shinyjs::useShinyjs(),
header = header,
sidebar = sidebar,
body = body,
rightsidebar = rightsidebar
)
)
server <- function(input, output) {
output$tab1 <- renderPrint({
"tab1"
})
output$plot1 <- renderPlot({
set.seed(122)
histdata <- rnorm(500)
data <- histdata[seq_len(req(input$obs1))]
hist(data)
})
output$tab2 <- renderPrint({
"tab2"
})
output$plot2 <- renderPlot(qplot(rnorm(500),fill=I("green"),binwidth=0.2,title="plotgraph2"))
output$data2 <- renderDT(datatable(iris))
output$tab3 <- renderPrint({
"Tab3"
})
output$plot3 <- renderPlot(qplot(rnorm(req(input$obs3)),fill=I("blue"),binwidth=0.2,title="plotgraph3"))
observe({
if (req(input$nav) == "Section_A"){
message("tab_1 has been selected")
#shinyjs::addClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
shinyjs::removeClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
output$side_bar <- renderUI({
rightSidebarTabContent(
id = "tab_1",
title = "Right sidebar for Section A ",
icon = "desktop",
#active = TRUE,
sliderInput(
"obs1",
"Number of observations:",
min = 0, max = 1000, value = 500
)
)
})
}
if (req(input$nav) == "Section_B"){
message("tab_2 has been selected")
#shinyjs::addClass(selector = "aside.control-sidebar", class = "control-sidebar-open") ## to add right sidebar
shinyjs::removeClass(selector = "aside.control-sidebar", class = "control-sidebar-open") ## remove right sidebar
output$side_bar <- renderUI({
rightSidebarTabContent(
id = "tab_2",
title = "Right sidebar for Section B ",
textInput("caption", "Caption", "Data Summary")
)
})
}
if (req(input$nav) == "Section_C"){
message("tab_3 has been selected")
#shinyjs::addClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
shinyjs::removeClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
output$side_bar <- renderUI({
rightSidebarTabContent(
id = "tab_3",
icon = "paint-brush",
title = "Right sidebar for Section C",
numericInput("obs3", "Observations:", 400, min = 1, max = 1000)
)
})
}
})
}
shinyApp(ui, server)

Resources