rshinyshinydashboardshinydashboardplus

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:

enter image description here

And when the hamburger is clicked to minimize the sidebar, the whole sidebar disappears:

enter image description here

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:

enter image description here

Is there a way to get the shinydashboardPlus minification that shows just the icons, but doesn't chop off the title?

Solution

  • 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. enter image description here