I have a shiny app with a shinydashboard sidebar. Because I wanted to be able to completely collapse the sidebar, including the header, I followed the answer provided in this question using shinydashboardPlus. However, upon switching from shinydashboard to shinydashboardPlus, I noticed the fonts change and I don’t understand why, as upon inspection, they should both have the same fonts.

Note, using dashboardPagePlus and dashboardHeaderPlus as per the answer was giving me errors, but the below code works except for the font discrepancies. It may seem minor, but it’s throwing off the entire layout of my actual app.

I tried to adapt it without using shinydashboardPlus, but wasn’t able to.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)


jscode <- HTML("
$(document).on('shiny:connected', function(event) {
  $('.sidebar-toggle').on('click', function() {
    if ($('body')[0].className != 'skin-blue sidebar-mini sidebar-collapse') {
      $('#sidebarCollapsed').css('display', 'none')
      $('nav.navbar-static-top').css('width', '1800px')
      $('nav.navbar-static-top').css('margin-left', '0px')
      $('header.main-header').css('width', '1800px')
      $('.sidebar-toggle').css('position', 'relative')
      $('span.logo').css('display', 'none')
    } else {
      $('#sidebarCollapsed').css('display', 'block')
      $('nav.navbar-static-top').css('margin-left', '230px')
      $('header.main-header').css('width', '884.44px')
      $('nav.navbar-static-top').css('width', '1800.44px')
      $('span.logo').css('display', 'block')
    }
  })
});
")

csscode <- HTML("
.sidebar-mini.sidebar-collapse .content-wrapper {
      margin-left: 0px !important;
}")



ui <- dashboardPage(
  dashboardHeader(title = "Toggle this!"),
  dashboardSidebar(
                   tags$head(tags$script(jscode)),
                   tags$head(tags$style(csscode)),
                   textInput("text", "Some Input", value = "1", placeholder = "1")
                   
  ),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

If, when not using shinydashboardPlus, I unselect the font family under ‘AdminLTE’, it then looks like it looks by default when using shinydashboardPlus. However, I really do not understand the underlying CSS in this case and why that would be the case. The goal is to either use shinydashboardPlus but have it look the same as if I were using shinydashboard (i.e same fonts, font weights etc.), or find a solution to collapse the sidebar AND the header without having to use shinydashboardPlus.