Fix content out of the container when open sidebar

src/scss/layouts/_header.scss

@@ -67,8 +67,9 @@
         }
     }
     // Class used to swipe to the top the header on small screen when the user scroll down
+    @include prefix(transition, 'margin-top 0.5s, margin-left 0.5s, width 0.5s', 'webkit' 'moz');
     &.header-up {
-        @include prefix(transform, translate3d(0, -#{map-get($header, height)}, 0), 'webkit' 'moz');
+        margin-top: -#{map-get($header, height)};
     }
 
     // Push the header from the size of the large sidebar

src/scss/utils/mixins/_bottom-bar.scss

@@ -27,20 +27,26 @@
 
 /// Mixin helper to pushed bottom bar from medium sidebar size
 @mixin bottom-bar-pushed-md {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to pushed bottom bar from large sidebar size
 @mixin bottom-bar-pushed-lg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 /// Mixin helper to pushed bottom bar from extra large sidebar size
 @mixin bottom-bar-pushed-xlg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }

src/scss/utils/mixins/_header.scss

@@ -1,19 +1,22 @@
 /// Mixin helper to push header from medium sidebar size
 @mixin header-pushed-md {
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to push header from large sidebar size
 @mixin header-pushed-lg {
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 /// Mixin helper to push header from extra large sidebar size
 @mixin header-pushed-xlg {
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }

src/scss/utils/mixins/_main.scss

@@ -28,21 +28,27 @@
 
 /// Mixin helper to push `main` div from medium sidebar size
 @mixin main-pushed-md {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to push `main` div from large sidebar size
 @mixin main-pushed-lg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 
 /// Mixin helper to push `main` div from extra large sidebar size
 @mixin main-pushed-xlg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }

src/scss/utils/mixins/_post-header-cover.scss

@@ -27,21 +27,27 @@
 
 /// Mixin helper to pushed post header cover from medium sidebar size
 @mixin post-header-cover-pushed-md {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
 /// Mixin helper to pushed post header cover from large sidebar size
 @mixin post-header-cover-pushed-lg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 
 /// Mixin helper to pushed post header cover from extra large sidebar size
 @mixin post-header-cover-pushed-xlg {
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }

src/scss/utils/mixins/_sidebar.scss

@@ -41,8 +41,9 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, md-screen-width)};
     }
 }
 
@@ -103,8 +104,9 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, lg-screen-width)};
     }
 }
 
@@ -194,7 +196,8 @@
         }
     }
     // Used to animate the sidebar (pushed effect)
+    @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz');
     &.pushed {
-        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        margin-left: #{map-get($sidebar, xlg-screen-width)};
     }
 }