Свернуть левую боковую панель полностью в ShinyDashboardPlus

Question

ShinyDashboardPlus имеет функцию, при которой меню левой боковой панели сворачивается, но все равно показывает значок.Проблема с этим заключается в том, что он не скрывает какие-либо кнопки или варианты ввода, размещенные на боковой панели.

Я ищу одно из следующих двух решений:

1) Чтобы полностью свернуть боковую панелькак в обычном shinydashboard (который скрывает кнопку и вводы)

2) Чтобы сохранить левостороннее меню как есть и как-то скрыть эти функции при частичном свертывании

Ниже приведен мой код для отображениявопрос:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

header <- dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "filter"
    )

sidebar <- dashboardSidebar(
  sidebarMenu(id = "menuChoice",
              menuItem("Tab 1", tabName = "Tab1", icon = icon("globe"))
  ),
  actionButton("Test", "Download", icon = icon("download")),
  selectInput(inputId = "TestChoice",label = "Selection", selected="Choice1",
              choices = c("Choice1","Choice2","Choice3"))
)

body <- dashboardBody()

rightsidebar <- rightSidebar()

ui <- dashboardPagePlus(header, sidebar, body, rightsidebar)

server <- function(input, output) {}

shinyApp(ui, server)

Answer 1

Я добавил несколько кодов jquery и css для имитации нормального поведения shinydashboard при закрытии боковой панели (Решение 1).

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

jscode <- HTML("
$(document).on('shiny:connected', function(event) {
  $('.sidebar-toggle').on('click', function() {
    if ($('body')[0].className != 'skin-blue sidebar-mini sidebar-collapse') {
      $('#sidebarCollapsed').css('display', 'none')
    } else {
      $('#sidebarCollapsed').css('display', 'block')
    }
  })
});
")

csscode <- HTML("
.sidebar-mini.sidebar-collapse .content-wrapper {
      margin-left: 0px !important;
}")

header <- dashboardHeaderPlus(
  enable_rightsidebar = TRUE,
  rightSidebarIcon = "filter"
)

sidebar <- dashboardSidebar(collapsed = T,
  tags$head(tags$script(jscode)),
  tags$head(tags$style(csscode)),
  sidebarMenu(id = "menuChoice",
              menuItem("Tab 1", tabName = "Tab1", icon = icon("globe"))
  ),
  actionButton("Test", "Download", icon = icon("download")),
  selectInput(inputId = "TestChoice",label = "Selection", selected="Choice1",
              choices = c("Choice1","Choice2","Choice3"))
)
body <- dashboardBody()
rightsidebar <- rightSidebar()

ui <- dashboardPagePlus(header, sidebar, body, rightsidebar)

###########################/server.R/###############################
server <- function(input, output) {}

#Combines Dasboard and Data together----
shinyApp(ui, server)

И с помощью некоторых CSS вы можете достичь решения 2, хотя вам, возможно, придетсядобавьте или настройте некоторые css в соответствии со своими предпочтениями:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

csscode <- HTML("
.sidebar-mini.sidebar-collapse .shiny-bound-input.action-button {
  margin: 6px 6px 6px 3px;
  max-width: 85%;
}
.sidebar-mini.sidebar-collapse .fa {
  font-size: initial;
}
.sidebar-mini.sidebar-collapse .btn-default {
  font-size: 0;
}
.sidebar-mini.sidebar-collapse #tohide {
  display: none;
}
")

header <- dashboardHeaderPlus(
  enable_rightsidebar = TRUE,
  rightSidebarIcon = "filter"
)

sidebar <- dashboardSidebar(collapsed = T,
                            tags$head(tags$style(csscode)),
                            sidebarMenu(id = "menuChoice",
                                        menuItem("Tab 1", tabName = "Tab1", icon = icon("globe"))
                            ),
                            actionButton("Test", "Download", icon = icon("download")),
                            div(id="tohide", 
                              selectInput(inputId = "TestChoice",label = "Selection", selected="Choice1",
                                          choices = c("Choice1","Choice2","Choice3"))
                                )
)

body <- dashboardBody()

rightsidebar <- rightSidebar()

ui <- dashboardPagePlus(header, sidebar, body, rightsidebar)

server <- function(input, output) {}

shinyApp(ui, server)