fixed sidenav for fuse https://github.com/angular/material2/issues/7201

package-lock.json

@@ -9178,8 +9178,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
       "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "uglifyjs-webpack-plugin": {
       "version": "0.4.6",

src/app/core/animations.ts

@@ -267,7 +267,7 @@ export class Animations
 
     public static routerTransitionFade = trigger('routerTransitionFade', [
 
-        transition('* => *', [
+        transition('* => *', group([
 
             query('fuse-content > :enter, fuse-content > :leave ', [
                 style({
@@ -283,28 +283,26 @@ export class Animations
                     opacity: 0
                 })
             ], {optional: true}),
-            // sequence([
+            query('fuse-content > :leave', [
-                query('fuse-content > :leave', [
+                style({
-                    style({
+                    opacity: 1
-                        opacity: 1
+                }),
-                    }),
+                animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                        style({
-                            opacity: 0
-                        }))
-                ], {optional: true}),
-                query('fuse-content > :enter', [
                     style({
                         opacity: 0
-                    }),
+                    }))
-                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+            ], {optional: true}),
-                        style({
+            query('fuse-content > :enter', [
-                            opacity: 1
+                style({
-                        }))
+                    opacity: 0
-                ], {optional: true}),
+                }),
-            // ]),
+                animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                    style({
+                        opacity: 1
+                    }))
+            ], {optional: true}),
             query('fuse-content > :enter', animateChild(), {optional: true}),
             query('fuse-content > :leave', animateChild(), {optional: true})
-        ])
+        ]))
     ]);
 }

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -73,7 +73,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
     {
         setTimeout(() => {
             this.stopTransition = false;
-        }, 0);
+        }, 300);
     }
 
     ngOnDestroy()

src/app/core/scss/partials/_angular-material-fix.scss

@@ -4,3 +4,50 @@
         border-radius: 50%;
     }
 }
+
+md-sidenav-container {
+
+    md-sidenav {
+        order: 1;
+
+        &.md-is-locked-open {
+            position: relative !important;
+        }
+
+        &.md-stop-transition {
+            transition: none !important;
+            transform: translate3d(0, 0, 0) !important;
+
+            ~ .mat-sidenav-content,
+            ~ .mat-drawer-content {
+                transition: none !important;
+            }
+        }
+
+        &.mat-sidenav-opened {
+
+            &.mat-drawer-side {
+
+                &.md-is-locked-open {
+                    position: relative !important;
+                }
+
+                ~ .mat-sidenav-content,
+                ~ .mat-drawer-content {
+                    transition: none !important;
+                    margin-left: 0 !important;
+                    margin-right: 0 !important;
+                    transform: translate3d(0, 0, 0) !important;
+                }
+            }
+        }
+
+        &.mat-drawer-end {
+            order: 3;
+        }
+    }
+
+    .mat-drawer-content {
+        order: 2;
+    }
+}

src/app/core/scss/partials/_page-layouts.scss

@@ -137,19 +137,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     @include mat-elevation(7);
 
                     &.md-is-locked-open {
-                        position: relative;
                         background: none;
                         box-shadow: none;
                     }
 
-                    &.md-stop-transition {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
-                            transition: none;
-                        }
-                    }
-
                     .header {
                         height: $carded-header-height;
                         min-height: $carded-header-height;
@@ -233,7 +224,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
-                            margin-left: 0 !important;
 
                             .center {
                                 margin-left: 0;
@@ -257,7 +247,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
-                            margin-right: 0 !important;
 
                             .center {
                                 margin-right: 0;
@@ -347,7 +336,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
             > md-sidenav-container {
                 display: flex;
-                flex-direction: column;
+                // flex-direction: column;
+                flex-direction: row;
                 flex: 1;
                 background: none;
                 z-index: 2;
@@ -368,14 +358,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         background: transparent;
                     }
 
-                    &.md-stop-transition {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
-                            transition: none;
-                        }
-                    }
-
                     .sidenav-content {
                         height: 100%;
                     }

src/app/main/content/apps/dashboards/project/project.component.html

@@ -687,7 +687,8 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side"
+                    fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
 
             <div class="sidenav-content" fusePerfectScrollbar>
                 <!-- WIDGET GROUP -->