How to display a shorter title if the sidebar is collapsed?

I have a bs4Dash dashboard. In this I have a long title: 'ABC - Controll System'. This title is also displayed correctly:

Now I want to display the short title "ABC" when I collapse the sidebar:

Here is my reproducible example:

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(
      title = dashboardBrand(
        title = div(HTML("<strong>ABC</strong> - Controll System"), style="text-align: center;"),
        color = "primary"
      )
      ),
    sidebar = dashboardSidebar(),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody()
  ),
  server = function(input, output) {}
)

Can someone help me?

A solution using css and js:

• The title has a lot of style properties by default if the sidebar is collapsed, they have to be deactivated (e.g. visibility: hidden):

  .sidebar-mini.sidebar-collapse .brand-text {
    all: unset;
  }
  

  I also removed the div around your title and centered the span text using

  [class*='sidebar-light'] .brand-link {
    text-align: center;
  }
  

• We toggle the title depending on whether the sidebar is collapsed using a MutationObserver:

  document.addEventListener('DOMContentLoaded', function(event) {
    var element = document.querySelector('body');
    new MutationObserver((mutations) => {
      document.querySelector('.brand-text').innerHTML =
        (mutations[0].target.classList.contains('sidebar-collapse')) ?
        '<strong>ABC</strong>' :
        '<strong>ABC</strong> - Controll System';
    })
    .observe(element, {
      attributes: true
    });
  });
  

library(shiny)
library(bs4Dash)

css <- c(
  ".sidebar-mini.sidebar-collapse .brand-text {",
  "  all: unset;",
  "}",
  "[class*='sidebar-light'] .brand-link {",
  "  text-align: center;",
  "}"
)

js <- c(
  "document.addEventListener('DOMContentLoaded', function(event) {",
    "var element = document.querySelector('body');",
    "new MutationObserver((mutations) => {",
      "document.querySelector('.brand-text').innerHTML = ",
      "  (mutations[0].target.classList.contains('sidebar-collapse')) ?",
      "  '<strong>ABC</strong>' :",
      "  '<strong>ABC</strong> - Controll System';",
    "})",
    ".observe(element, {",
    "  attributes: true ",
    "});",
  "});"
)

ui <- dashboardPage(
  title = "Basic Dashboard",
  header = dashboardHeader(title = dashboardBrand(
    title = "test",
    color = "primary"
  )),
  sidebar = dashboardSidebar(
    tags$head(tags$style(HTML(css)),
              tags$script(HTML(js)))
  ),
  controlbar = dashboardControlbar(),
  footer = dashboardFooter(),
  body = dashboardBody()
)

shinyApp(ui, \(...) {})