In Shiny bs4Dash Sidebar collapsing but images are icons menu are not displayed

Question

When I collapse the sidebar the icons of each tabItems menu the icons are no longer visible.

How can I change the css to show the image/img/icons when the sidebar is collapsed?

library(bs4Dash)
library(shiny)
library(purrr)

 ui <- dashboardPage(
    header = dashboardHeader(
      title = dashboardBrand(
        title = "My dashboard",
        color = "primary",
        # href = "https://adminlte.io/themes/v3",
        image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
      )
    ),

    sidebar = dashboardSidebar(
      bs4Dash::sidebarMenu(id = "sidebarMenu",

                           map2(
                             c(
                               'Africa',
                               'Americas',
                               'Asia',
                               'Europe',
                               'Oceania'
                             ),
                             1:5,
                             ~
                               bs4Dash::menuItem(
                                 text = p(
                                   class = 'p_sidebar_country',
                                   tags$img(
                                     src ="https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png",
                                     width = '18px',
                                     height = '18px',
                                     style = 'margin-right: .25em;'
                                   ),
                                   paste0(.x)
                                 ),
                                 tabName = paste0('panel_', .y)
                               )
                           ))

    ),

    body = dashboardBody(),

    controlbar = dashboardControlbar(),
    title = "DashboardPage"
  )
  server <- function(input, output) { }


shinyApp(ui, server)

I think I ca use css or even an argument of dashboardSidebar() to make the icons visible when the sidebar is collapsed, but how do I do that?

not Collapsed:

Collapsed:

I want the icons to appear in the collapsed sidebar.

score 3 · Accepted Answer · answered Mar 17 '23 at 02:20

The easiest solution is just use the icon parameter which uses font awesome or glyphicon to add icons, but the options are limited.

library(bs4Dash)

ui <- dashboardPage(
  header = dashboardHeader(
    title = dashboardBrand(
      title = "My dashboard",
      color = "primary",
      # href = "https://adminlte.io/themes/v3",
      image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
    )
  ),
  
  sidebar = dashboardSidebar(
    bs4Dash::sidebarMenu(id = "sidebarMenu",
                         
                         map2(
                           c(
                             'Africa',
                             'Americas',
                             'Asia',
                             'Europe',
                             'Oceania'
                           ),
                           1:5,
                           ~
                             bs4Dash::menuItem(
                               icon = icon("a"),
                               text = .x,
                               tabName = paste0('panel_', .y)
                             )
                         ))
    
  ),
  
  body = dashboardBody(),
  
  controlbar = dashboardControlbar(),
  title = "DashboardPage"
)
server <- function(input, output) { }
shinyApp(ui, server)

To use the custom image and have it show up when collapsing, using a shiny row would work and be much easier than building custom CSS:

library(bs4Dash)

ui <- dashboardPage(
  header = dashboardHeader(
    title = dashboardBrand(
      title = "My dashboard",
      color = "primary",
      # href = "https://adminlte.io/themes/v3",
      image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
    )
  ),
  
  sidebar = dashboardSidebar(
    bs4Dash::sidebarMenu(id = "sidebarMenu",
                         
                         map2(
                           c(
                             'Africa',
                             'Americas',
                             'Asia',
                             'Europe',
                             'Oceania'
                           ),
                           1:5,
                           ~
                             bs4Dash::menuItem(
                               text = 
                                 shiny::fillRow(
                                   tags$img(
                                     src ="https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png",
                                     width = '18px',
                                     height = '18px',
                                     style = 'margin-right: .25em;'
                                   ),
                                   tags$p(
                                     class = 'p_sidebar_country',
                                     paste0(.x)
                                   ),
                                   flex = c(1,4),
                                   height = "18px"
                                ),
                               tabName = paste0('panel_', .y)
                             )
                         ))
    
  ),
  
  body = dashboardBody(),
  
  controlbar = dashboardControlbar(),
  title = "DashboardPage"
)
server <- function(input, output) { }
shinyApp(ui, server)

In Shiny bs4Dash Sidebar collapsing but images are icons menu are not displayed

1 Answers1