add support for bookmarking the expanded/collapsed state of the whole…

… sidebar

R/dashboardSidebar.R

@@ -117,12 +117,19 @@ dashboardSidebar <- function(..., disable = FALSE, width = NULL, collapsed = FAL
     '))))
   }
 
+  # If we're restoring a bookmarked app, this holds the value of whether or not the
+  # sidebar was collapsed. If this is not the case, the default is whatever the user
+  # specified in the `collapsed` argument.
+  dataValue <- shiny::restoreInput(id = "sidebarCollapsed",
+    default = if (collapsed) "true" else "false")
+
   # The expanded/collapsed state of the sidebar is actually set by adding a
   # class to the body (not to the sidebar). However, it makes sense for the
   # `collapsed` argument to belong in this function. So this information is
-  # just passed through (also as a class) to the `dashboardPage()` function
-  tags$aside(class = paste("main-sidebar", if (collapsed) "start-collapsed"),
-    custom_css,
+  # just passed through (as the `data-collapsed` attribute) to the
+  # `dashboardPage()` function
+  tags$aside(
+    class = "main-sidebar", `data-collapsed` = dataValue, custom_css,
     tags$section(
       class = "sidebar",
       `data-disable` = if (disable) 1 else NULL,

srcjs/input_binding_sidebarCollapsed.js

@@ -0,0 +1,40 @@
+/* global Shiny */
+
+// sidebarCollapsedInputBinding
+// ------------------------------------------------------------------
+// This keeps tracks of whether the sidebar is expanded (default)
+// or collapsed
+var sidebarCollapsedInputBinding = new Shiny.InputBinding();
+$.extend(sidebarCollapsedInputBinding, {
+  find: function(scope) {
+    return $(scope).find('.main-sidebar').first();
+  },
+  getId: function(el) {
+    return "sidebarCollapsed";
+  },
+  getValue: function(el) {
+    return $(el).attr("data-collapsed");
+  },
+  setValue: function(el, value) {
+    $(el).attr("data-collapsed", value);
+  },
+  toggleValue: function(el) {
+    var current = this.getValue(el);
+    var newVal = (current === "true") ? "false" : "true";
+    this.setValue(el, newVal);
+  },
+  receiveMessage: function(el, data) {
+    if (data.hasOwnProperty('value'))
+      this.setValue(el, data.value);
+  },
+  subscribe: function(el, callback) {
+    $(el).on('change.sidebarCollapsedInputBinding', function() {
+      callback();
+    });
+  },
+  unsubscribe: function(el) {
+    $(el).off('.sidebarCollapsedInputBinding');
+  }
+});
+Shiny.inputBindings.register(sidebarCollapsedInputBinding,
+  'shinydashboard.sidebarCollapsedInputBinding');

srcjs/sidebar.js

@@ -1,13 +1,20 @@
-// Optionally disable sidebar
+// Optionally disable sidebar (set through the `disable` argument
+// to the `dashboardSidebar` function)
 if ($("section.sidebar").data("disable")) {
   $("body").addClass("sidebar-collapse");
   $(".navbar > .sidebar-toggle").hide();
 }
 
-// Trigger the resize event when the sidebar is collapsed/expanded
-// (this allows images to be responsive and resize themselves)
+// Whenever the sidebar expand/collapse button is clicked:
 $(document).on("click", ".sidebar-toggle", function() {
+  // 1) Trigger the resize event (so images are responsive and resize)
   $(window).trigger("resize");
+
+  // 2) Update the value for the sidebar's input binding
+  var $obj = $('.main-sidebar.shiny-bound-input');
+  var inputBinding = $obj.data('shiny-input-binding');
+  inputBinding.toggleValue($obj);
+  $obj.trigger('change');
 });
 
 $(document).on("click", ".treeview > a", function() {

tools/Gruntfile.js

@@ -39,6 +39,7 @@ module.exports = function(grunt) {
           srcdirjs + 'sidebar.js',
           srcdirjs + 'output_binding_menu.js',
           srcdirjs + 'input_binding_tabItem.js',
+          srcdirjs + 'input_binding_sidebarCollapsed.js',
           srcdirjs + '_end.js'
         ],
         dest: destdirjs + 'shinydashboard.js'
@@ -108,6 +109,7 @@ module.exports = function(grunt) {
         srcdirjs + 'sidebar.js',
         srcdirjs + 'output_binding_menu.js',
         srcdirjs + 'input_binding_tabItem.js',
+        srcdirjs + 'input_binding_sidebarCollapsed.js',
       ]
     },