All geek questions in one place

How to encode theft of the sidebar in shiny to show only icons

If you are familiar with a shiny website , you will notice that when you click a button to collapse the sidebar, it displays more icons (but not completely hiding the sidebar.

Do you know how this can be encoded?

I heard that a package shinyBScan be useful or bootable, but I don’t understand what it is.

Before folding:

<body id="app" class="app ng-scope buffer-pinterest" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

enter image description here

And this (see selected text): enter image description here

After coagulation:

<body id="app" class="app ng-scope buffer-pinterest nav-collapsed-min" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

enter image description here

+4
source share
1 answer

: shinydashboard ( navbar bootstrap AdminLTE) shinyjs ( ). :

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu(menuItem('Test', icon = icon('phone'), tabName = 'sampletabname'))),
  dashboardBody(h3('Test app'),
                useShinyjs())
)

server <- function(input, output) {
  runjs('
        var el2 = document.querySelector(".skin-blue");
        el2.className = "skin-blue sidebar-mini";
        ')
}

shinyApp(ui, server)

EDIT: , , : css. ( ):

  runjs({'
        var el2 = document.querySelector(".skin-blue");
        el2.className = "skin-blue sidebar-mini";
        var clicker = document.querySelector(".sidebar-toggle");
        clicker.id = "switchState";
    '})

  onclick('switchState', runjs({'
        var title = document.querySelector(".logo")
        if (title.style.visibility == "hidden") {
          title.style.visibility = "visible";
        } else {
          title.style.visibility = "hidden";
        }
  '}))
+3

Source: https://habr.com/ru/post/1665033/

More articles:


All Articles