How to code a Sidebar collapse in shiny to show only icons
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";
}
'}))