Menu
If you are familiar with the shiny website, you'll notice that when you press the button to collapse the sidebar, it's showing bigger icons (but not completely hiding the sidebar.
Do you know how is this possible to code this?
I heard that the package shinyBS could be useful or bootstrap things, but I don't understand what it is.
Before collapsing:
<body id="app" class="app ng-scope buffer-pinterest" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">
And this (see highlighted text):
After collapsing:
<body id="app" class="app ng-scope buffer-pinterest nav-collapsed-min" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">
447
To display the sidebar on your page select the “Show Sidebar” radio button in the “Hide Sidebar” pane near the bottom right of the editing page (figure 2). Alternatively, select the “Hide Sidebar” radio in order to hide the sidebar and allow content to occupy the full width of the content area.
click(function(){ $('#sidebar'). removeClass('hidden-xs'); }); If you click the button it toggles the sidebar from the top. It be great to see the sidebar behave like the website above shows.
You can accomplish that with a little help of two great libraries: shinydashboard (obtaining navbar based on AdminLTE bootstrap theme) and shinyjs (including neccessary class to the template). Working code below:
## 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: To solve the problem mentioned in the comment I play with visibility: hidden css style. New content of server part of the app (rest remains unchanged):
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";
}
'}))
Or you can insert that code in the javascript file e.g. sidebar.js inside the www folder (placed on the same level as server.R and ui.R)
$( document ).ready(function() {
$(".skin-blue").addClass("sidebar-mini");
$(".sidebar-toggle").click(function() {
$(".logo").toggleClass("hidden");
});
});
Then you need to load it in the page head, namely on top of your dashboardBody:
dashboardBody(
tags$head(
tags$script(src = "sidebar.js")
),
...
And you can not care about shinyjs
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
