如何在Shiny Dashboard头部侧边栏切换按钮后添加公司Logo

需求：希望在Shiny Dashboard头部的侧边栏切换按钮右侧添加公司Logo，预期效果为侧边栏折叠/展开按钮右侧显示品牌标识。

当前使用的代码示例：

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(
    titleWidth = 0,
    title = div("", id = "home_logo", a(href = "#Home",
                                        (img(src = "http://www.google.com/s2/favicons?domain=stackoverflow.com", height = "25px", 
                                             style = "position: relative; top:-5px; left: -40px;")) ))

  ),
  dashboardSidebar(
    collapsed = TRUE
    
    
  ),
  dashboardBody(

    
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
    left: 23rem;
}
.skin-white .main-header .logo {
    background-color: #3c8dbc;}"),
    
    
  )
  )                                

server <- function(input, output) {
  
  
}

shinyApp(ui, server)

修改方案 #

要实现侧边栏切换按钮右侧显示Logo，可通过调整dashboardHeader结构与CSS样式完成，核心是让Logo与切换按钮横向排列并对齐：

修改后的完整代码：

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(
    # 设置titleWidth为Logo所需宽度，预留显示空间
    titleWidth = 120,
    title = div(
      # 公司Logo：可替换为自己的图片地址
      a(href = "#Home", 
        img(src = "http://www.google.com/s2/favicons?domain=stackoverflow.com", 
            height = "30px", 
            style = "padding: 0 10px;")),
      style = "display: flex; align-items: center; height: 100%;"
    )
  ),
  dashboardSidebar(
    collapsed = TRUE
  ),
  dashboardBody(
    tags$style(type="text/css", "
      /* 调整侧边栏切换按钮位置，使其与Logo横向排列 */
      .main-header .sidebar-toggle {
        float: left;
        margin-left: 0;
        height: 50px;
        line-height: 50px;
      }
      /* 调整头部导航栏位置，避免被Logo区域遮挡 */
      .main-header .navbar {
        margin-left: 120px;
      }
      /* 适配Logo区域的背景色与宽度 */
      .skin-white .main-header .logo {
        background-color: #3c8dbc;
        width: 120px;
      }
    ")
  )
)                                

server <- function(input, output) {
  
}

shinyApp(ui, server)

关键调整说明 #

• titleWidth设置：匹配Logo的宽度，确保头部有足够空间展示标识
• Flex布局容器：让Logo在头部区域垂直居中，保持视觉对齐
• 切换按钮样式调整：统一按钮高度与行高，和Logo的垂直位置匹配
• 导航栏边距适配：通过margin-left与titleWidth一致，避免页面内容被遮挡

完成以上修改后，侧边栏切换按钮右侧即可显示公司Logo，符合预期效果。

内容的提问来源于stack exchange，提问作者firmo23