add collapsible sidebar which is capable of showing only icons

NEWS

@@ -2,6 +2,11 @@ shinydashboard 0.5.1.9000
 --------------------------------------------------------------------------------
 * Updated to AdminLTE 2.3.2 (1ee281b).
 
+* Adds collapsible sidebar which is capable of showing only icons (PR #133)
+
+* Sidebar can animate into the page when clicked on the menu hide/show item
+  in the top header (#79)
+
 shinydashboard 0.5.1
 --------------------------------------------------------------------------------
 

R/dashboardHeader.R

@@ -7,6 +7,8 @@
 #'   will also be used as the title shown in the browser's title bar. If you
 #'   want that to be different from the text in the dashboard header bar, set
 #'   the \code{title} in \code{\link{dashboardPage}}.
+#' @param shortTitle A short title for responsive dashboards. Only relevant if
+#'  \code{dashboardSidebar(sideBarMini = T)}
 #' @param titleWidth The width of the title area. This must either be a number
 #'   which specifies the width in pixels, or a string that specifies the width
 #'   in CSS units.
@@ -86,7 +88,8 @@
 #' )
 #' }
 #' @export
-dashboardHeader <- function(..., title = NULL, titleWidth = NULL, disable = FALSE, .list = NULL) {
+dashboardHeader <- function(..., title = NULL, shortTitle = NULL, titleWidth = NULL,
+                            disable = FALSE, .list = NULL) {
   items <- c(list(...), .list)
   lapply(items, tagAssert, type = "li", class = "dropdown")
 
@@ -115,7 +118,9 @@ dashboardHeader <- function(..., title = NULL, titleWidth = NULL, disable = FALS
   tags$header(class = "main-header",
     custom_css,
     style = if (disable) "display: none;",
-    span(class = "logo", title),
+    a(class = "logo",
+      span(class = "logo-lg", title),
+      span(class = "logo-mini", shortTitle)),
     tags$nav(class = "navbar navbar-static-top", role = "navigation",
       # Embed hidden icon so that we get the font-awesome dependency
       span(shiny::icon("bars"), style = "display:none;"),

R/dashboardSidebar.R

@@ -8,6 +8,9 @@
 #' @param width The width of the sidebar. This must either be a number which
 #'   specifies the width in pixels, or a string that specifies the width in CSS
 #'   units.
+#' @param sideBarMini TRUE or FALSE (default). False collapses sidebar completly
+#'  while TRUE will show collapsed sidebar with icon(s). Use
+#'  \code{dashboardHeader(shortTitle = "DB Demo")} for responsive title.
 #'
 #' @seealso \code{\link{sidebarMenu}}
 #'
@@ -59,7 +62,8 @@
 #' )
 #' }
 #' @export
-dashboardSidebar <- function(..., disable = FALSE, width = NULL) {
+dashboardSidebar <- function(..., disable = FALSE, width = NULL,
+                             sideBarMini = FALSE) {
   width <- validateCssUnit(width)
 
   # Set up custom CSS for custom width
@@ -117,7 +121,8 @@ dashboardSidebar <- function(..., disable = FALSE, width = NULL) {
     custom_css,
     tags$section(
       class = "sidebar",
-      `data-disable` = if(disable) 1 else NULL,
+      `data-disable` = if (disable) 1 else NULL,
+      `data-minify` = if (sideBarMini) 1 else NULL,
       list(...)
     )
   )

inst/shinydashboard.css

@@ -58,7 +58,7 @@ a > .info-box {
   color: #333;
 }
 
-/* Disable bouncy transition for sidebar toggle. */
+/* Disable bouncy transition for sidebar toggle.
 .content-wrapper,
 .right-side,
 .main-footer {
@@ -74,7 +74,7 @@ a > .info-box {
   -o-transition: all 0 none;
   transition: none;
 }
-
+*/
 
 /*  Shiny Server Pro logout panel needs to be raised above menu bar */
 .shiny-server-account {

inst/shinydashboard.js

@@ -55,6 +55,10 @@ $(function() {
     $(".navbar > .sidebar-toggle").hide();
   }
 
+  // Optionally display only sidebar icons
+  if ($("section.sidebar").data("minify")) {
+    $("body").addClass("sidebar-mini sidebar-collapse");
+  }
 
   // menuOutputBinding
   // ------------------------------------------------------------------