0

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?

Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
KirkD-CO
  • 1,603
  • 1
  • 22
  • 35
  • What do you mean "but doesn't chop off the title"? Not showing the title at all or change the title to a smaller font size so it still shows it? You understand if you collapse, there is not enough space to show the original text right? – lz100 Oct 15 '21 at 23:17
  • If you run the code, you'll see that when you minimize with shinydashboard, the title does not change - it doesn't get chopped or clipped but remains displayed. But when you minimize with shinydashboardPlus, the title get clipped. Essentially the right boundary follows the minimization of the navigation pane below it. I would like the title to stay as it is before minimization but the navigation pane below it to shrink to only display icons. – KirkD-CO Oct 15 '21 at 23:45

1 Answers1

3

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

lz100
  • 6,990
  • 6
  • 29