How to expand/collapse the shiny dashboard sidebar on mouse hover?

Question

Within a Shiny Dashboard, I would like that mouse hover the mini-sidebar expands it. When mouse leaves the sidebar it then collapse automatically in its original state (mini-sidebar).

The closest answer I get right now is by using the expand/collapse default button function with a mouse hover using a JQuery (see code below) but I would like this effect to be extend for the whole sidebar (thanks to How to make appear sidebar on hover instead of click in Shiny?)

I guess that one way to do that is by triggering the a.sidebar-toggle click action on sidebar mouse hover, but I have been unable to find the sidebar object class to observe a mouseover on it.

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

Minimal example:

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) { }
)

Please check my answer. – ismirsehregal Feb 12 '20 at 09:01 — ismirsehregal, Feb 12 '20 at 09:01

ismirsehregal · Accepted Answer · 2022-12-01T19:59:23.063

9

Here is a library(shinyjs) solution:

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"))
  }
)

Edit:

As mentioned by @yeahman269 this is now an official feature of library(shinydashboardPlus). It can be actiivated by using the option sidebarExpandOnHover = TRUE.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
   ui = dashboardPage(
     options = list(sidebarExpandOnHover = TRUE),
     header = dashboardHeader(),
     sidebar = dashboardSidebar(minified = TRUE, collapsed = TRUE),
     body = dashboardBody(
      lapply(1:20, box, width = 12, title = "box")
     ),
     controlbar = dashboardControlbar(),
     title = "DashboardPage"
   ),
   server = function(input, output) { }
 )

Example taken from here.

edited Dec 01 '22 at 19:59

answered Feb 11 '20 at 13:34

ismirsehregal

30,045
5
31
78

1

You're the boss! Thanks – yeahman269 Feb 13 '20 at 09:23
If you move the cursor on an item, the item text appear, leading to an exceedance of the text over the sidebar (the first microseconds). Do you have a way to make the text appear only once the sidebar has been expanded and not before to avoid this behavior? – yeahman269 Feb 13 '20 at 09:42
I fear thats the general `shinydashboardPlus` behaviour. Comment out the `onevent` calls. and collapse the sidebar via the burger-menu button. You will see, that the text is exceeding into the body constantly on hovering the menu items. You might want to [report here](https://github.com/RinteRface/shinydashboardPlus/issues) - but who knows maybe its a feature. – ismirsehregal Feb 13 '20 at 10:03
Hi, I am curious if anyone found a way around this? – fullera Sep 15 '20 at 03:59
I havn't. You might want to file an issue [here](https://github.com/RinteRface/shinydashboardPlus/issues). – ismirsehregal Sep 15 '20 at 12:09
1

@fullera: the new version of `shinydashboardPlus` (2.0) now has a integrated feature for that (I think it's even by default), you may want to check it. – yeahman269 Jun 16 '21 at 12:54

How to expand/collapse the shiny dashboard sidebar on mouse hover?

1 Answers1

Linked

Related