Menu
I have a shiny app with a mainPanel and a sidebarPanel inside a tabPanel in a navbarPage. I need an option to hide the sidebarPanel similar to this: Hide sidebar in default in shinydashboard and https://github.com/daattali/shinyjs/issues/43.
An actionButton should control if the sidebarPanel is shown or collapsed.
This is the code:
library(shiny)
library(shinyjs)
ui <- fluidPage(
navbarPage("",
tabPanel("tab",
sidebarPanel(
useShinyjs()
),
mainPanel(actionButton("showSidebar", "Show sidebar"),
actionButton("hideSidebar", "Hide sidebar")
)
)
)
)
server <-function(input, output, session) {
observeEvent(input$showSidebar, {
shinyjs::removeClass(selector = "body", class = "sidebarPanel-collapse")
})
observeEvent(input$hideSidebar, {
shinyjs::addClass(selector = "body", class = "sidebarPanel-collapse")
})
}
shinyApp(ui, server)
360
A sidebarLayout (): for placing a sidebarPanel () of inputs alongside a mainPanel () output content. Custom layouts using Shiny’s grid layout system (i.e., fluidRow () & column () ). Segmenting layouts using the tabsetPanel () and navlistPanel () functions. Creating applications with multiple top-level components using the navbarPage () function.
To be narrower to free space. When performing the collapse action, Shiny is translating the sidebar by its width in piwel to the left (which hides it). To achieve the semi-collapsed sidebar, the new CSS will overwrite the previous translation to no translation and change the sidebar width to 40px (this is the icon width).
To hide the text on collapse, Shiny needs to know that the sidebar is collapsed. To do so, we will add a Shiny Input that will respond to a click on the collapse button. ‘.sidebar-toggle’ is the button class.Hence,if the button is clicked, a random number is generated and assigned to input$SideBar_col_react.
Application layout guide. Overview. Shiny includes a number of facilities for laying out the components of an application. This guide describes the following application layout features: The simple default layout with a sidebar for inputs and a large main area for output. Custom application layouts using the Shiny grid layout system.
I have modified your code to hide and show the sidebar. To create the id for the sidebarPanelI have enclosed it within div and given it theid = Sidebar. To show and hide the side bar I have used shinyjs function show and hide with the id as Sidebar.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
navbarPage("",
tabPanel("tab",
div( id ="Sidebar",sidebarPanel(
)),
mainPanel(actionButton("showSidebar", "Show sidebar"),
actionButton("hideSidebar", "Hide sidebar")
)
)
)
)
server <-function(input, output, session) {
observeEvent(input$showSidebar, {
shinyjs::show(id = "Sidebar")
})
observeEvent(input$hideSidebar, {
shinyjs::hide(id = "Sidebar")
})
}
shinyApp(ui, server)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
