class = "logo-lg" and "logo-mini" does not work

[algo-se]

This works:

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

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(
      title = HTML(paste0(
        '<span class = "logo-lg">
            <img src = "https://image.flaticon.com/icons/svg/204/204074.svg" width="25%" style = "margin: auto auto auto; display: block;">
                </span>',
        '<span class = "logo-mini">
            <img src= "https://image.flaticon.com/icons/svg/207/207074.svg" width="50%">
                </span>'
      ))
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

This does not:

library(shiny)
library(bs4Dash)

shinyApp(
  ui = bs4Dash::dashboardPage(
    header = bs4Dash::dashboardHeader(
      title = HTML(paste0(
        '<span class = "logo-lg">
            <img src = "https://image.flaticon.com/icons/svg/204/204074.svg" width="25%" style = "margin: auto auto auto; display: block;">
                </span>',
        '<span class = "logo-mini">
            <img src= "https://image.flaticon.com/icons/svg/207/207074.svg" width="50%">
                </span>'
      ))
    ),
    sidebar = bs4DashSidebar(),
    body = bs4Dash::dashboardBody(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

[DivadNojnarg]

{shinydashboard} and {shinydashboardPlus} don't depend on the same HTML template as {bs4Dash}. These CSS classes disappeared in the original AdminLTE3 template. You can use dashboardBrand instead.

[algo-se]

Hi @DivadNojnarg thanks for the hint. Is it possible to get that functionality with the new {bs4Dash} template?

This does something but not the same 😛 :

library(shiny)
library(bs4Dash)

shinyApp(
  ui = bs4Dash::dashboardPage(
    header = bs4Dash::dashboardHeader(
      title = dashboardBrand(
        title = HTML(paste0(
          '<span class = "logo-lg">
            <img src = "https://image.flaticon.com/icons/svg/204/204074.svg" width="25%" style = "margin: auto auto auto; display: block;">
                </span>',
          '<span class = "logo-mini">
            <img src= "https://image.flaticon.com/icons/svg/207/207074.svg" width="50%">
                </span>'
        ))
      )
    ),
    sidebar = bs4DashSidebar(),
    body = bs4Dash::dashboardBody(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

I also tried to put the HTML in the image argument of dashboardBrand but did not work.

[algo-se]

I tried to use other CSS classes but they only change the logo between mobile and desktop view, and not when collapsing the sidebar:

library(shiny)
library(bs4Dash)

shinyApp(
  ui = bs4Dash::dashboardPage(
    header = bs4Dash::dashboardHeader(
      title = dashboardBrand(
        title = HTML(paste0(
          '<span class = "d-none d-lg-block">
            <img src = "https://image.flaticon.com/icons/svg/204/204074.svg"; width="25%"; style = "margin: auto auto auto; display: block;">
                </span>',
          '<span class = "d-lg-none">
            <img src= "https://image.flaticon.com/icons/svg/207/207074.svg"; width="25%"; style = "margin: auto auto auto; display: block;>
                </span>'
        ))
      )
    ),
    sidebar = bs4DashSidebar(),
    body = bs4Dash::dashboardBody(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

Also, they introduce weird behaviour when expanding the sidebar on hover:

[algo-se]

I´ve managed to do this reading this part of the documentation:

library(shiny)
library(bs4Dash)

shinyApp(
  ui = bs4Dash::dashboardPage(
    header = bs4Dash::dashboardHeader(
      title = HTML(paste0(
          '<a href="#" class="brand-link logo-switch">
            <img src="https://image.flaticon.com/icons/svg/207/207074.svg" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs" style = "margin: auto auto auto; display: block;">
            <img src="https://image.flaticon.com/icons/svg/204/204074.svg" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style = "margin: auto auto auto; display: block;">
            </a>'
        )
      )
    ),
    sidebar = bs4DashSidebar(),
    body = bs4Dash::dashboardBody(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

The logo is not centered but I´ll get there.

[algo-se]

Also, in case anyone find this useful, to center the long logo I used this css position: absolute; left: 50%; transform: translate(-50%):

<img src="sofitec-navbar.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style = "margin: auto auto auto; display: block; position: absolute; left: 50%; transform: translate(-50%);">