Hide totally the sidebar when pressing the toggle button in shiny dashboard - r

Is there any way to hide totally the sidebar when pressing the toggle button at the top of the dashboard? Right now a a part of the sidebar remains.
#app.r
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
),
sidebar = dashboardSidebar(),
body = dashboardBody(
),
rightsidebar = rightSidebar(),
title = "DashboardPage"
),
server = function(input, output) { }
)

You can add sidebar_fullCollapse=TRUE in to the dashboardPagePlus command to fully collapse it

Related

Hide title section of shiny dashboard in a way that the toggle button is in the most left spot of the dashboard header

I would like to know how can I totally skip the title section from shinydashboard header. So the first object to see will be the toggle button that hides and display the sidebar. Now if I set titlewidth to 0 there is still a small gap between the toggle button and the beginning of the page. Something like:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
titleWidth = 0
),
dashboardSidebar(
),
dashboardBody(
)
)
server <- function(input, output){}
shinyApp(ui, server)
Would adding this bit of CSS help?
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
titleWidth = 0
),
dashboardSidebar(
),
dashboardBody(
tags$style(type="text/css",".sidebar-toggle{ position: absolute;
left: 0;
}")
)
)
server <- function(input, output){}
shinyApp(ui, server)

Not able to change the background color of the bs4Dash::dashboardSidebar() properly

1. Color issue using only the bs4Dash package
I am starting to use the package bs4Dash and I am facing a problem with the background color of the left sidebar bs4Dash::dashboardSidebar(). I observe that when I start the app the background color of the left sidebar is always in gray, but when I switch to dark mode and back to light mode the color render with a white color background.
You can observe this behavior using the code below that was taken from help webpage of bs4Dash
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)
2. Color problem using fresh and bs4Dash package
Using the package fresh when I open the app for the first time It is still with the grey background color, but when I switch from dark mode to light It renders the color according to fresh::create_theme().
Here is an example
# library
library(shiny)
library(bs4Dash)
library(fresh)
# theme creator with fresh::
mytheme <- create_theme(
bs4dash_sidebar_light(
bg = "#FFFF00")
)
#shinyApp
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody(use_theme(mytheme)),
freshTheme = TRUE
),
server = function(input, output) {}
)
I found out this issue in the Github but can't figure out how to solve this problem.
This problem was mentioned in this issue. You can fix it by adding skin = "light" in dashboardSidebar(), as below:
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(skin = "light"),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)

Toggle display of sidebar menu in shinydashboard programmatically

I am working with R shiny dashboard and was wondering if I can collapse/show the sidebar with an additional button, just like the already existing one on top of the sidebar.
Is that possible?
Cheers
You can add / remove the needed css class to / from the body via shinyjs:
library(shiny)
library(shinyjs)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
shinyjs::useShinyjs(),
actionButton("toggle_btn", "Toggle sidebar")
)
)
server <- function(input, output, session) {
observeEvent(input$toggle_btn, {
shinyjs::toggleClass(selector = "body", class = "sidebar-collapse")
})
}
shinyApp(ui, server)

shinydashboard vs shinydashboardPlus - dashboardsidebar title differences

I have a Shiny app built with shinydashboard and I've just discovered shinydashboardPlus. One nice option is to have the sidebarMenu "minified", or when minimized it doesn't go away completely, but just displays the icons for each menuItem. However, with shinydashboardPlus, when minified, the title gets chopped off. With shinydashboard, the title stays intact, but the sidebar goes away completely.
Example code:
library(shiny)
library(shinydashboard)
#library(shinydashboardPlus)
# Basic dashboard page template
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(#minified = TRUE,
sidebarMenu(
menuItem('Menu1', tabName = 'Menu1',
icon = icon('folder-open')),
menuItem('Menu2', tabName = 'Menu2',
icon = icon('code-branch'))
)
),
dashboardBody()
),
server = function(input, output) { }
)
Leaving the comment marks in place and running it uses shinydashboard, and gives this initially:
And when the hamburger is clicked to minimize the sidebar, the whole sidebar disappears:
If the comment marks are removed so that it runs using shinydashboardPlus, minimizing it gives this, where I have the icons in the sidebar, but the title is chopped:
Is there a way to get the shinydashboardPlus minification that shows just the icons, but doesn't chop off the title?
Here you go
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
# Basic dashboard page template
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(#minified = TRUE,
sidebarMenu(
menuItem('Menu1', tabName = 'Menu1',
icon = icon('folder-open')),
menuItem('Menu2', tabName = 'Menu2',
icon = icon('code-branch'))
)
),
dashboardBody(
tags$style(
'
#media (min-width: 768px){
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 230px;
}
.sidebar-mini.sidebar-collapse .main-header .navbar {
margin-left: 230px;
}
}
'
)
)
),
server = function(input, output) { }
)
change the width and margin-left numbers if you have extreme long titles.

How to Disable Shiny bs4Dash Dashboard controlbar (Right Sidebar)

What is the parameter to control the right side bar on a Shiny bs4Dash dashboard. My reading of the dashboardControlbar function at https://rinterface.github.io/bs4Dash/articles/step-by-step.html, which I understand to be the sidebar to the right of the page, is to set disable = T, in a similar way to how the dashboardSidebar(disable = T) controls the appearance sidebar to the left.
I have set controlbar = dashboardControlbar(disable = T) however on the Shiny App below and the right sidebar still opens when pressing the button at the top. Thanks for any suggestions in advance.
Edit (in response to dashboardHeader comment ):
This question is in reference to bs4Dash V2.0.0 available via github.
https://github.com/RinteRface/bs4Dash
Please note that the github page also recommends github versions of htmltools and shiny.
library(shiny)
library(bs4Dash)
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
disable = T
),
body = dashboardBody(),
controlbar = dashboardControlbar(
disable = T
),
title = ""
)
server <- function(input, output, session) {}
shinyApp(ui, server)
You can remove controlbar argument to disable it.
library(shiny)
library(bs4Dash)
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
disable = T
),
body = dashboardBody(),
title = ""
)
server <- function(input, output, session) {}
shinyApp(ui, server)

Resources