r - 单击左侧边栏菜单项时，激活/停用 Shinydashboardplus 右侧栏中的选项卡

Question

我正在使用伟大的 ShinyDashoardPlus 构建一个 Shiny 的应用程序包含三个 Dashboardthemes 的包(以 tabItems 包中的主题设计)保存应用程序三个部分(A 部分、B 部分和 C 部分)的内容，可通过 sidebarMenu 访问在左边 dashboardSidebar ，以及带有两个选项卡(实现为 rightSidebarTabContent 并具有以下 ID: T_A 和 T_B )的右侧边栏，用于分别进一步探索 A 部分和 B 部分的内容。

自 rightSidebarTabContent T_A仅与 section A 相关, 和 rightSidebarTabContent T_B仅与 section B 相关, 我想 (1) 用户的 单击左侧边栏菜单项 A 或 B 可以 激活右侧边栏中的相应选项卡 .而且，由于没有rightSidebarTabContents与 section C 相关，我也想要(2)用户的单击左侧边栏菜单项 C 可以 关闭右侧栏 ，如果它是开放的。

我找到了一个关于如何解决我的问题的可能提示( Automatic rightSidebar popup when menuItem is clicked in shinydashboardPlus )，并且我确实能够通过 shinyjs 部分解决我添加/删除一些 CSS 类的第一个问题。激活 rightSidebar 中不同选项卡的一部分点击 menuItems .

正如我所说，这个解决方案部分适用于我的第一个问题，尽管只有 rightSidebarTabContent下部以这种方式激活/停用，但不是带有用于在它们之间导航的图标的选项卡标题。此外，可能是由于在应用 Shinydashboard 主题“dark”时添加了额外的 CSS 类，我无法切换 rightSidebar 的关闭状态。点击 section C菜单项(问题#2)。

总结一下:

右侧边栏项目 T_A当左侧边栏项目时应该展开 section A被选中。同样对于 T_A和 section B .

右侧边栏应该在 section C 时折叠起来在左侧边栏被选中

任何人都可以帮忙吗？在此先感谢您的帮助!

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 frelevant 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 frelevant for section B"),
      textInput("caption", "Caption", "Data Summary")
    )
  ),
  title = "Right Sidebar"
)


server <- function(input, output) {
  observe({
    if (req(input$nav) == "Section_A"){
      message("Section A has been selected")
      shinyjs::removeClass(id = "control-sidebar-T_A-tab", class = "tab-pane")
      shinyjs::removeClass(id = "control-sidebar-T_B-tab", class = "tab-pane active")
      shinyjs::addClass(id = "control-sidebar-T_A-tab", class = "tab-pane active")
      shinyjs::addClass(id = "control-sidebar-T_B-tab", class = "tab-pane")
    }
    if (req(input$nav) == "Section_B"){
      message("Section B has been selected")
      shinyjs::removeClass(id = "control-sidebar-T_B-tab", class = "tab-pane")
      shinyjs::removeClass(id = "control-sidebar-T_A-tab", class = "tab-pane active")
      shinyjs::addClass(id = "control-sidebar-T_B-tab", class = "tab-pane active")
      shinyjs::addClass(id = "control-sidebar-T_A-tab", class = "tab-pane")
    }
    if (req(input$nav) == "Section_C"){
      message("Section C has been selected")
      shinyjs::removeClass(selector = "aside.control-sidebar-open aside.control-sidebar-dark", class = "control-sidebar-open aside.control-sidebar-dark-open")
      shinyjs::addClass(selector = "aside.control-sidebar", class = "control-sidebar")
    }
  })
}


shinyApp(ui = ui, server = server)

Answer 1

您可以通过 renderUI react 性地呈现右侧边栏项目而不是修改 CSS .内rightSidebar我们可以放置一个 uiOutput这将根据左侧边栏中的所选项目填充不同的内容。请注意，这是部分解决方案。侧边栏一旦展开，在选择 section C 时仍不会折叠。在左侧边栏中。 [请参阅下面的编辑，解决右侧边栏的折叠问题。]

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",
    uiOutput("side_bar"),
    title = "Right Sidebar"
  )
)

server <- function(input, output) {
  observe({
    if (req(input$nav) == "Section_A"){
      message("Section A has been selected")
      # added in edit
      shinyjs::addClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
      output$side_bar <- renderUI({
        rightSidebarTabContent(
          id = "T_A",
          title = "Tab for section A",
          p("Some content relevant for section A"),
          sliderInput(
            "obs",
            "Number of observations:",
            min = 0, max = 1000, value = 500
          )
        )
      })
    }
    if (req(input$nav) == "Section_B"){
      message("Section B has been selected")
      # added in edit
      shinyjs::addClass(selector = "aside.control-sidebar", class = "control-sidebar-open")
      output$side_bar <- renderUI({
        rightSidebarTabContent(
          id = "T_B",
          title = "Tab for section B",
          p("Some content relevant for section B"),
          textInput("caption", "Caption", "Data Summary")
        )
      })
    }

    if (req(input$nav) == "Section_C"){
      message("Section C has been selected")
      # added in edit
      shinyjs::removeClass(selector = "aside.control-sidebar", class = "control-sidebar-open")

      output$side_bar <- renderUI({ div() })
    }
  })
}


shinyApp(ui = ui, server = server)

编辑:当 section C 时折叠右侧边栏被点击 .仔细阅读您链接的帖子后，您可以简单地添加

shinyjs::addClass(selector = "aside.control-sidebar", class = "control-sidebar-open")

在您的观察者时 section A和 section B被选中，并添加

shinyjs::removeClass(selector = "aside.control-sidebar", class = "control-sidebar-open")

当 section C被选中。

然后右侧边栏将根据左侧边栏中的选择展开和折叠。

行为的 gif: