如何实现shinydashboardPlus侧边栏始终最小化且hover展开？

要实现侧边栏仅显示图标、鼠标悬停时展示完整信息，同时保留小屏幕的汉堡菜单功能，可通过CSS自定义样式结合shinydashboardPlus的基础配置来实现，具体方案如下：

1. 基础侧边栏配置 #

先设置侧边栏初始折叠状态，指定仅显示图标的最小宽度：

sidebar <- dashboardSidebar(
  width = 50,  # 仅容纳图标的窄宽度
  collapsed = TRUE,
  sidebarMenu(
    id = 'sidebar',
    menuItem("Tab number One", tabName = 'tab1', icon = shiny::icon('chart-area')),
    menuItem("Tab number Two", tabName = 'tab2', icon = shiny::icon('map'))
  )
)

2. 自定义CSS实现核心效果 #

在仪表盘主体中嵌入CSS代码，实现大屏幕下的悬停展开逻辑，同时保留小屏幕的汉堡按钮功能：

ui <- dashboardPagePlus(
  header = dashboardHeaderPlus(),
  sidebar = sidebar,
  body = dashboardBody(
    tags$head(
      tags$style(HTML("
        /* 大屏幕适配（≥768px）：默认窄侧边栏，悬停展开 */
        @media (min-width: 768px) {
          .main-sidebar {
            width: 50px !important;
            min-width: 50px !important;
            max-width: 50px !important;
            transition: width 0.3s ease;
          }
          .main-sidebar:hover {
            width: 250px !important;
            min-width: 250px !important;
            max-width: 250px !important;
          }
          /* 隐藏大屏幕下的汉堡按钮，避免用户手动展开 */
          .navbar-expand-lg .navbar-toggler {
            display: none;
          }
          /* 默认隐藏菜单文字，悬停时显示 */
          .sidebar-collapse .sidebar-menu>li>a>span {
            display: none;
          }
          .main-sidebar:hover .sidebar-menu>li>a>span {
            display: inline;
          }
        }
        /* 小屏幕适配（<768px）：恢复默认侧边栏行为 */
        @media (max-width: 767px) {
          .main-sidebar {
            width: 250px !important;
            min-width: 250px !important;
            max-width: 250px !important;
          }
          .navbar-expand-lg .navbar-toggler {
            display: block;
          }
          .sidebar-collapse .sidebar-menu>li>a>span {
            display: inline;
          }
        }
      "))
    ),
    tabItems(
      tabItem(tabName = "tab1", h2("Tab 1 Content")),
      tabItem(tabName = "tab2", h2("Tab 2 Content"))
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

关键细节说明 #

• 大屏幕场景：侧边栏固定为50px窄宽度，仅显示图标；鼠标悬停时平滑展开到250px（可自行修改宽度值），显示完整菜单文字；同时隐藏汉堡按钮，阻止用户手动调整侧边栏状态。
• 小屏幕场景：自动恢复shinydashboardPlus的默认交互逻辑，汉堡按钮正常工作，点击可展开/收起侧边栏，菜单文字始终可见。
• 过渡动画transition: width 0.3s ease让悬停展开/收缩过程更流畅，可根据需求调整动画时长。

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