reworked control-sidebar & removed overflow from wrapper and html

- added display none/block to control-sidebar to avoid sidewards scrolling
- reworked ControlSidebar.js with queue to add and remove .control-sidebar-animate from html to avoid overflow

build/js/ControlSidebar.js

@@ -28,8 +28,9 @@ const ControlSidebar = (($) => {
   }
 
   const ClassName = {
-    CONTROL_SIDEBAR_OPEN : 'control-sidebar-open',
-    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
+    CONTROL_SIDEBAR_ANIMATE: 'control-sidebar-animate',
+    CONTROL_SIDEBAR_OPEN   : 'control-sidebar-open',
+    CONTROL_SIDEBAR_SLIDE  : 'control-sidebar-slide-open'
   }
 
   const Default = {
@@ -52,7 +53,12 @@ const ControlSidebar = (($) => {
     show() {
       // Show the control sidebar
       if (this._config.slide) {
-        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+        $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
+          $(Selector.CONTROL_SIDEBAR).hide()
+          $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+          $(this).dequeue()
+        })
       } else {
         $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }
@@ -61,7 +67,14 @@ const ControlSidebar = (($) => {
     collapse() {
       // Collapse the control sidebar
       if (this._config.slide) {
-        $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+        $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+        $(Selector.CONTROL_SIDEBAR).show().delay(100).queue(function(){
+          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
+            $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+            $(this).dequeue()
+          })
+          $(this).dequeue()
+        })
       } else {
         $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }

build/scss/_control-sidebar.scss

@@ -3,6 +3,10 @@
  * --------------------------
  */
  
+html.control-sidebar-animate {
+  overflow-x: hidden;
+}
+
 .control-sidebar {
   position: absolute;
   top: $main-header-height;
@@ -11,6 +15,7 @@
   &,
   &::before {
     bottom: 0;
+    display: none;
     right: -$control-sidebar-width;
     width: $control-sidebar-width;
     @include transition(right $transition-speed $transition-fn);
@@ -29,6 +34,8 @@
 .control-sidebar-open {
   @include media-breakpoint-up(md) {
     .control-sidebar {
+      display: block;
+
       &,
       &::before {
         right: 0;
@@ -54,6 +61,8 @@
 // Control sidebar slide over content state
 .control-sidebar-slide-open {
   .control-sidebar {
+    display: block;
+
     &,
     &::before {
       right: 0;

build/scss/_layout.scss

@@ -11,11 +11,9 @@ html,
 body,
 .wrapper {
   min-height: 100%;
-  overflow-x: hidden;
 }
 
 .wrapper {
-  overflow: hidden;
   position: relative;
 
   & .content-wrapper {

dist/js/adminlte.js

@@ -29,6 +29,7 @@
       MAIN_HEADER: '.main-header'
     };
     var ClassName = {
+      CONTROL_SIDEBAR_ANIMATE: 'control-sidebar-animate',
       CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
       CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
     };
@@ -55,7 +56,12 @@
       _proto.show = function show() {
         // Show the control sidebar
         if (this._config.slide) {
-          $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE);
+          $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE);
+          $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
+            $(Selector.CONTROL_SIDEBAR).hide();
+            $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE);
+            $(this).dequeue();
+          });
         } else {
           $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN);
         }
@@ -64,7 +70,14 @@
       _proto.collapse = function collapse() {
         // Collapse the control sidebar
         if (this._config.slide) {
-          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE);
+          $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE);
+          $(Selector.CONTROL_SIDEBAR).show().delay(100).queue(function () {
+            $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
+              $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE);
+              $(this).dequeue();
+            });
+            $(this).dequeue();
+          });
         } else {
           $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN);
         }