ShinyDashboardPlus左侧菜单联动右侧侧边栏激活/关闭问题求助

Let's fix your Shiny app issues step by step. The core problems with your current implementation are:

• You weren't updating the right sidebar tab headers (only the content panes), so the active tab indicator didn't sync.
• Your CSS selectors for closing the right sidebar didn't account for the extra classes added by the grey_dark theme.

Here's the full working code with explanations:

library(shiny)
library(shinyjs)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)
library(dashboardthemes)

ui <- dashboardPagePlus(
  useShinyjs(),
  header = dashboardHeaderPlus(
    title = "Dashboard",
    enable_rightsidebar = TRUE,
    rightSidebarIcon = "info-circle"
  ),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem("Section A", tabName = "Section_A", icon = icon("map")),
      menuItem("Section B", tabName = "Section_B", icon = icon("chart-line")),
      menuItem("Section C", tabName = "Section_C", icon = icon("gears")),
      id = "nav"
    )
  ),
  body = dashboardBody(
    shinyDashboardThemes(
      theme = "grey_dark"
    ),
    tabItems(
      tabItem(
        tabName = "Section_A",
        p("Some content for section A")),
      tabItem(
        tabName = "Section_B",
        p("Some content for section B")),
      tabItem(
        tabName = "Section_C",
        p("Some content for section C"))
    )
  ),
  rightsidebar = rightSidebar(
    background = "dark",
    rightSidebarTabContent(
      id = "T_A",
      title = "Tab for section A",
      icon = "desktop",
      active = TRUE,
      p("Some content relevant for section A"),
      sliderInput(
        "obs", "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    ),
    rightSidebarTabContent(
      id = "T_B",
      title = "Tab for section B",
      p("Some content relevant for section B"),
      textInput("caption", "Caption", "Data Summary")
    )
  ),
  title = "Right Sidebar"
)

server <- function(input, output) {
  observe({
    current_tab <- req(input$nav)
    
    if (current_tab == "Section_A") {
      message("Section A selected")
      
      # Sync right sidebar tab header
      shinyjs::removeClass(selector = ".nav-tabs > li > a[href='#control-sidebar-T_B-tab']", class = "active")
      shinyjs::addClass(selector = ".nav-tabs > li > a[href='#control-sidebar-T_A-tab']", class = "active")
      
      # Sync right sidebar content pane
      shinyjs::removeClass(id = "control-sidebar-T_B-tab", class = "active")
      shinyjs::addClass(id = "control-sidebar-T_A-tab", class = "active")
      
      # Ensure right sidebar is open (optional, but useful if it was closed)
      shinyjs::addClass(selector = "body", class = "control-sidebar-open")
      shinyjs::addClass(selector = ".control-sidebar-dark", class = "control-sidebar-dark-open")
    }
    
    if (current_tab == "Section_B") {
      message("Section B selected")
      
      # Sync right sidebar tab header
      shinyjs::removeClass(selector = ".nav-tabs > li > a[href='#control-sidebar-T_A-tab']", class = "active")
      shinyjs::addClass(selector = ".nav-tabs > li > a[href='#control-sidebar-T_B-tab']", class = "active")
      
      # Sync right sidebar content pane
      shinyjs::removeClass(id = "control-sidebar-T_A-tab", class = "active")
      shinyjs::addClass(id = "control-sidebar-T_B-tab", class = "active")
      
      # Ensure right sidebar is open
      shinyjs::addClass(selector = "body", class = "control-sidebar-open")
      shinyjs::addClass(selector = ".control-sidebar-dark", class = "control-sidebar-dark-open")
    }
    
    if (current_tab == "Section_C") {
      message("Section C selected")
      
      # Close right sidebar (target theme-specific classes)
      shinyjs::removeClass(selector = "body", class = "control-sidebar-open")
      shinyjs::removeClass(selector = ".control-sidebar-dark", class = "control-sidebar-dark-open")
    }
  })
}

shinyApp(ui = ui, server = server)

Key Fixes Explained: #

1. Syncing Right Sidebar Tabs:

   • We target the tab headers using a CSS selector that matches the link pointing to the right sidebar content pane (a[href='#control-sidebar-T_A-tab']). This ensures both the header and content pane show as active.
   • We add/remove the active class from both the header link and the content pane to keep them in sync.

2. Closing Right Sidebar for Section C:

   • The grey_dark theme adds extra classes to the body (control-sidebar-open) and the control sidebar (control-sidebar-dark-open). We explicitly remove both classes to fully close the sidebar, regardless of the theme.
   • We use selector instead of id here because these classes are applied to generic elements (body and the control-sidebar container).

3. Optional: Auto-Open Sidebar for A/B:

   • We added code to ensure the right sidebar opens automatically when switching to Section A or B, in case it was closed previously. You can remove this if you prefer the sidebar to stay in its current state unless the user toggles it.

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