Как развернуть / свернуть блестящую боковую панель приборной панели при наведении мыши?

Question

В Shiny Dashboard мне бы хотелось, чтобы указатель мыши на мини-боковой панели расширял ее. Когда мышь покидает боковую панель, она автоматически сворачивается в исходное состояние (мини-боковая панель).

Самый близкий ответ, который я получаю сейчас, - использование функции кнопки «Развернуть / Свернуть» по умолчанию при наведении курсора мыши на * 1022. * (см. код ниже), но я бы хотел, чтобы этот эффект был расширен для всей боковой панели (благодаря Как сделать так, чтобы боковая панель появлялась при наведении курсора вместо щелчка в Shiny? )

Я думаю, один из способов сделать это - вызвать действие щелчка a.sidebar-toggle при наведении мыши на боковой панели, но мне не удалось найти класс объекта боковой панели, чтобы наблюдать за наведением на него мыши.

tags$head(tags$script(HTML("$(function() {$('the sidebar object').mouseover(function(e) { $(a.sidebar-toggle).click()})});")))

Минимальный пример:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem("DASHBOARD1", tabName = "Spectrum", icon = icon("table")
        ), #menuItem
        menuItem("DASHBOARD2", tabName = "LTE", icon = icon("mobile-alt"))        
      )),
    body = dashboardBody(),
    title = "TEST",
    tags$head(tags$script(HTML("$(function() { $('a.sidebar-toggle').mouseover(function(e) { $(this).click()})});"))),

  ),
  server = function(input, output) { }
)

Answer 1

Вот решение library(shinyjs):

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

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(enable_rightsidebar = TRUE,
                                 rightSidebarIcon = "gears"),
    sidebar = dashboardSidebar(
      sidebarMenu(
        id = "sidebar_id",
        menuItem("DASHBOARD1", tabName = "Spectrum", icon = icon("table")),
        menuItem("DASHBOARD2", tabName = "LTE", icon = icon("mobile-alt"))
      )
    ),
    body = dashboardBody(
      useShinyjs()
      ),
    title = "TEST"
  ),
  server = function(input, output, session) {
    onevent("mouseenter", "sidebarCollapsed", shinyjs::removeCssClass(selector = "body", class = "sidebar-collapse"))
    onevent("mouseleave", "sidebarCollapsed", shinyjs::addCssClass(selector = "body", class = "sidebar-collapse"))
  }
)