some control-sidebar fixes

- removed setMargin in js
- fixed control-sidebar slide animate step
- added zindex-contro-sidebar
- added control-sidebar-push class
- updated zindex's

build/js/ControlSidebar.js

@@ -30,8 +30,8 @@ const ControlSidebar = (($) => {
 
   const ClassName = {
     CONTROL_SIDEBAR_ANIMATE: 'control-sidebar-animate',
-    CONTROL_SIDEBAR_OPEN   : 'control-sidebar-open',
-    CONTROL_SIDEBAR_SLIDE  : 'control-sidebar-slide-open'
+    CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
+    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
   }
 
   const Default = {
@@ -55,9 +55,9 @@ const ControlSidebar = (($) => {
       // Show the control sidebar
       if (this._config.controlsidebarSlide) {
         $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
-        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(50).queue(function(){
+        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
+          $(Selector.CONTROL_SIDEBAR).hide()
           $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
-          $(Selector.CONTROL_SIDEBAR).fadeOut()
           $(this).dequeue()
         })
       } else {
@@ -72,8 +72,8 @@ const ControlSidebar = (($) => {
       // Collapse the control sidebar
       if (this._config.controlsidebarSlide) {
         $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
-        $(Selector.CONTROL_SIDEBAR).show().delay(50).queue(function(){
-          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(50).queue(function(){
+        $(Selector.CONTROL_SIDEBAR).show().delay(10).queue(function(){
+          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
             $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
             $(this).dequeue()
           })
@@ -88,8 +88,6 @@ const ControlSidebar = (($) => {
     }
 
     toggle() {
-      this._setMargin()
-
       const shouldOpen = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
         .hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)
       if (shouldOpen) {
@@ -107,12 +105,6 @@ const ControlSidebar = (($) => {
       return $.extend({}, Default, config)
     }
 
-    _setMargin() {
-      $(Selector.CONTROL_SIDEBAR).css({
-        top: $(Selector.MAIN_HEADER).innerHeight()
-      })
-    }
-
     // Static
 
     static _jQueryInterface(operation) {

build/scss/_control-sidebar.scss

@@ -9,7 +9,7 @@ html.control-sidebar-animate {
 .control-sidebar {
   position: absolute;
   top: $main-header-height;
-  z-index: 830;
+  z-index: $zindex-control-sidebar;
 
   &,
   &::before {
@@ -17,11 +17,11 @@ html.control-sidebar-animate {
     display: none;
     right: -$control-sidebar-width;
     width: $control-sidebar-width;
-    @include transition(right $transition-speed $transition-fn);
+    @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
   }
 
   &::before {
-    content: " ";
+    content: '';
     display: block;
     position: fixed;
     top: 0;
@@ -29,6 +29,13 @@ html.control-sidebar-animate {
   }
 }
 
+.control-sidebar-push {
+    .content-wrapper,
+    .main-footer {
+      @include transition(margin-right $transition-speed $transition-fn);
+    }
+  }
+
 // Control sidebar open state
 .control-sidebar-open {
   @include media-breakpoint-up(md) {
@@ -41,9 +48,11 @@ html.control-sidebar-animate {
       }
     }
 
-    .content-wrapper,
-    .main-footer {
-      margin-right: $control-sidebar-width;
+    &.control-sidebar-push {
+      .content-wrapper,
+      .main-footer {
+        margin-right: $control-sidebar-width;
+      }
     }
   }
 
@@ -65,6 +74,14 @@ html.control-sidebar-animate {
     &,
     &::before {
       right: 0;
+      @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
+    }
+  }
+
+  &.control-sidebar-push {
+    .content-wrapper,
+    .main-footer {
+      margin-right: $control-sidebar-width;
     }
   }
 }

build/scss/_layout.scss

@@ -47,6 +47,10 @@ body,
   }
 
   .layout-navbar-fixed & {
+    .control-sidebar {
+      top: 0;
+    }
+
     a.anchor {
       display: block;
       position: relative;
@@ -119,6 +123,10 @@ body,
       }
 
       .layout#{$infix}-navbar-fixed & {
+        .control-sidebar {
+          top: 0;
+        }
+
         a.anchor {
           display: block;
           position: relative;
@@ -197,7 +205,7 @@ body,
       left: 0;
       position: fixed;
       right: 0;
-      z-index: $zindex-main-sidebar - 1;
+      z-index: $zindex-main-footer;
     }
   }
 
@@ -221,7 +229,7 @@ body,
           left: 0;
           position: fixed;
           right: 0;
-          z-index: $zindex-main-sidebar - 1;
+          z-index: $zindex-main-footer;
         }
 
         .content-wrapper {

build/scss/_variables.scss

@@ -152,8 +152,10 @@ $attachment-border-radius: 3px !default;
 
 // Z-INDEX
 // --------------------------------------------------------
-$zindex-main-header: $zindex-fixed + 2 !default;
-$zindex-main-sidebar: $zindex-fixed + 6 !default;
+$zindex-main-header: $zindex-fixed + 4 !default;
+$zindex-main-sidebar: $zindex-fixed + 8 !default;
+$zindex-main-footer: $zindex-fixed + 1 !default;
+$zindex-control-sidebar: $zindex-fixed + 2 !default;
 $zindex-sidebar-mini-links: 010 !default;
 
 // TRANSITIONS SETTINGS

docs/components/control-sidebar.md

@@ -7,6 +7,10 @@ Control sidebar is the right sidebar. It can be used for many purposes and is ex
 
 The following code should be placed within the `.wrapper` div. I prefer to place it right after the footer.
 
+##### Control Sidebar Push
+{: .text-bold .text-dark}
+By adding the `.control-sidebar-push` to `body`, the sidebar pushes the content away instead of overlaying the content.
+
 ##### Dark Sidebar Markup
 {: .text-bold .text-dark}
 ```html