diff --git a/NEWS b/NEWS index d26178f8..5330bf2e 100644 --- a/NEWS +++ b/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 -------------------------------------------------------------------------------- diff --git a/R/dashboardHeader.R b/R/dashboardHeader.R index 001e07e6..12318580 100644 --- a/R/dashboardHeader.R +++ b/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;"), diff --git a/R/dashboardSidebar.R b/R/dashboardSidebar.R index 8e2068e8..d0268e20 100644 --- a/R/dashboardSidebar.R +++ b/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(...) ) ) diff --git a/inst/shinydashboard.css b/inst/shinydashboard.css index 7a2af9a2..948ec48e 100644 --- a/inst/shinydashboard.css +++ b/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 { diff --git a/inst/shinydashboard.js b/inst/shinydashboard.js index 6f6677d9..24b8f3ae 100644 --- a/inst/shinydashboard.js +++ b/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 // ------------------------------------------------------------------ diff --git a/man/dashboardHeader.Rd b/man/dashboardHeader.Rd index 02cf4bd0..45cdedd4 100644 --- a/man/dashboardHeader.Rd +++ b/man/dashboardHeader.Rd @@ -4,8 +4,8 @@ \alias{dashboardHeader} \title{Create a header for a dashboard page} \usage{ -dashboardHeader(..., title = NULL, titleWidth = NULL, disable = FALSE, - .list = NULL) +dashboardHeader(..., title = NULL, shortTitle = NULL, titleWidth = NULL, + disable = FALSE, .list = NULL) } \arguments{ \item{...}{Items to put in the header. Should be \code{\link{dropdownMenu}}s.} @@ -15,6 +15,9 @@ 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}}.} +\item{shortTitle}{A short title for responsive dashboards. Only relevant if +\code{dashboardSidebar(sideBarMini = T)}} + \item{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.} diff --git a/man/dashboardSidebar.Rd b/man/dashboardSidebar.Rd index aba589ca..ae97eb68 100644 --- a/man/dashboardSidebar.Rd +++ b/man/dashboardSidebar.Rd @@ -4,7 +4,7 @@ \alias{dashboardSidebar} \title{Create a dashboard sidebar.} \usage{ -dashboardSidebar(..., disable = FALSE, width = NULL) +dashboardSidebar(..., disable = FALSE, width = NULL, sideBarMini = FALSE) } \arguments{ \item{...}{Items to put in the sidebar.} @@ -14,6 +14,10 @@ dashboardSidebar(..., disable = FALSE, width = NULL) \item{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.} + +\item{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.} } \description{ A dashboard sidebar typically contains a \code{\link{sidebarMenu}}, although