fixed control-sidebar slide option

- renamed `slide` to `controlsidebarSlide` to avoid bootstrap js error
- reworked js to get slide false working without transition
- added .control-sidebar-hold-transition

Author: REJack

build/js/ControlSidebar.js

@@ -12,7 +12,7 @@
   var DataKey = 'lte.controlsidebar';
 
   var Default = {
-    slide: true
+    controlsidebarSlide: true
   };
 
   var Selector = {
@@ -26,7 +26,8 @@
   };
 
   var ClassName = {
-    open : 'control-sidebar-open',
+    open: 'control-sidebar-open',
+    transition: 'control-sidebar-hold-transition',
     fixed: 'fixed'
   };
 
@@ -72,8 +73,11 @@
 
   ControlSidebar.prototype.expand = function () {
     $(Selector.sidebar).show();
-    if (!this.options.slide) {
-      $('body').addClass(ClassName.open);
+    if (!this.options.controlsidebarSlide) {
+      $('body').addClass(ClassName.transition).addClass(ClassName.open).delay(50).queue(function(){
+        $('body').removeClass(ClassName.transition);
+        $(this).dequeue()
+      })
     } else {
       $(Selector.sidebar).addClass(ClassName.open);
     }
@@ -83,7 +87,14 @@
   };
 
   ControlSidebar.prototype.collapse = function () {
-    $('body, ' + Selector.sidebar).removeClass(ClassName.open);
+    if (!this.options.controlsidebarSlide) {
+      $('body').addClass(ClassName.transition).removeClass(ClassName.open).delay(50).queue(function(){
+        $('body').removeClass(ClassName.transition);
+        $(this).dequeue()
+      })
+    } else {
+      $(Selector.sidebar).removeClass(ClassName.open);
+    }
     $(Selector.sidebar).fadeOut();
     $(this.element).trigger($.Event(Event.collapsed));
   };

build/less/control-sidebar.less

@@ -41,6 +41,14 @@
 }
 
 // Open without slide over content
+.control-sidebar-hold-transition {
+  .control-sidebar-bg,
+  .control-sidebar,
+  .content-wrapper {
+    transition: none;
+  }
+
+}
 .control-sidebar-open {
   .control-sidebar-bg,
   .control-sidebar {

dist/css/AdminLTE.css

@@ -748,6 +748,11 @@ a:focus {
 .control-sidebar.control-sidebar-open + .control-sidebar-bg {
   right: 0;
 }
+.control-sidebar-hold-transition .control-sidebar-bg,
+.control-sidebar-hold-transition .control-sidebar,
+.control-sidebar-hold-transition .content-wrapper {
+  transition: none;
+}
 .control-sidebar-open .control-sidebar-bg,
 .control-sidebar-open .control-sidebar {
   right: 0;

dist/css/AdminLTE.min.css

@@ -749,6 +749,11 @@ a:focus {
 .control-sidebar.control-sidebar-open + .control-sidebar-bg {
   right: 0;
 }
+.control-sidebar-hold-transition .control-sidebar-bg,
+.control-sidebar-hold-transition .control-sidebar,
+.control-sidebar-hold-transition .content-wrapper {
+  transition: none;
+}
 .control-sidebar-open .control-sidebar-bg,
 .control-sidebar-open .control-sidebar {
   right: 0;

dist/css/alt/AdminLTE-without-plugins.css

@@ -329,7 +329,7 @@ throw new Error('AdminLTE requires jQuery')
   var DataKey = 'lte.controlsidebar';
 
   var Default = {
-    slide: true
+    controlsidebarSlide: true
   };
 
   var Selector = {
@@ -343,7 +343,8 @@ throw new Error('AdminLTE requires jQuery')
   };
 
   var ClassName = {
-    open : 'control-sidebar-open',
+    open: 'control-sidebar-open',
+    transition: 'control-sidebar-hold-transition',
     fixed: 'fixed'
   };
 
@@ -389,8 +390,11 @@ throw new Error('AdminLTE requires jQuery')
 
   ControlSidebar.prototype.expand = function () {
     $(Selector.sidebar).show();
-    if (!this.options.slide) {
-      $('body').addClass(ClassName.open);
+    if (!this.options.controlsidebarSlide) {
+      $('body').addClass(ClassName.transition).addClass(ClassName.open).delay(50).queue(function(){
+        $('body').removeClass(ClassName.transition);
+        $(this).dequeue()
+      })
     } else {
       $(Selector.sidebar).addClass(ClassName.open);
     }
@@ -400,7 +404,14 @@ throw new Error('AdminLTE requires jQuery')
   };
 
   ControlSidebar.prototype.collapse = function () {
-    $('body, ' + Selector.sidebar).removeClass(ClassName.open);
+    if (!this.options.controlsidebarSlide) {
+      $('body').addClass(ClassName.transition).removeClass(ClassName.open).delay(50).queue(function(){
+        $('body').removeClass(ClassName.transition);
+        $(this).dequeue()
+      })
+    } else {
+      $(Selector.sidebar).removeClass(ClassName.open);
+    }
     $(Selector.sidebar).fadeOut();
     $(this.element).trigger($.Event(Event.collapsed));
   };