Page layout tweaks

Removed body color class

src/@fuse/components/sidebar/sidebar.component.scss

@@ -58,7 +58,7 @@ fuse-sidebar {
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 3;
+    z-index: 999;
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0;
 

src/@fuse/scss/partials/_global.scss

@@ -9,4 +9,5 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
+    background: #F5F5F5;
 }

src/@fuse/scss/partials/_page-layouts.scss

@@ -191,7 +191,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 min-width: 240px;
                 max-width: 240px;
                 height: auto;
-                z-index: 4;
                 overflow: hidden;
                 @include mat-elevation(7);
 
@@ -200,7 +199,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     box-shadow: none;
 
                     + .center {
-                        z-index: 5;
+                        z-index: 1001;
                     }
 
                     &.left-positioned {
@@ -439,7 +438,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 width: 240px;
                 min-width: 240px;
                 max-width: 240px;
-                z-index: 4;
                 overflow: hidden;
                 @include mat-elevation(7);
 
@@ -448,7 +446,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     box-shadow: none;
 
                     + .center {
-                        z-index: 5;
+                        z-index: 1001;
                     }
 
                     &.left-positioned {
@@ -516,10 +514,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                 > .content {
                     display: flex;
+                    min-height: 0;
 
                     > .sidebar {
-                        background: none;
+
-                        box-shadow: none;
+                        &.locked-open {
+                            background: none;
+                            box-shadow: none;
+                        }
 
                         .content {
                             overflow: auto;

src/app/layout/components/navbar/navbar.component.scss

@@ -25,6 +25,7 @@ navbar {
 
     &:not(.top-navbar) {
         height: 100%;
+        overflow: hidden;
     }
 
     .navbar-vertical {
@@ -63,7 +64,8 @@ navbar {
         }
 
         .navbar-content {
-            flex: 1;
+            flex: 1 1 auto;
+            overflow-y: auto;
         }
     }
 

src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component.html

@@ -35,7 +35,7 @@
                     <mat-icon>menu</mat-icon>
                 </button>
 
-                <h2 class="m-0">Left sidenav with tabs and content scroll</h2>
+                <h2 class="m-0">Left sidebar with tabs and content scroll</h2>
 
             </div>
 

src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-2/left-sidebar-tabbed-2.component.html

@@ -35,7 +35,7 @@
                     <mat-icon>menu</mat-icon>
                 </button>
 
-                <h2 class="m-0">Left sidenav with tabs and inner scroll</h2>
+                <h2 class="m-0">Left sidebar with tabs and inner scroll</h2>
 
             </div>
 

src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component.html

@@ -35,7 +35,7 @@
                     <mat-icon>menu</mat-icon>
                 </button>
 
-                <h2 class="m-0">Right sidenav with tabs and content scroll</h2>
+                <h2 class="m-0">Right sidebar with tabs and content scroll</h2>
 
             </div>
 

src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-2/right-sidebar-tabbed-2.component.html

@@ -35,7 +35,7 @@
                     <mat-icon>menu</mat-icon>
                 </button>
 
-                <h2 class="m-0">Right sidenav with tabs and inner scroll</h2>
+                <h2 class="m-0">Right sidebar with tabs and inner scroll</h2>
 
             </div>
 

src/app/main/ui/page-layouts/page-layouts.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from '@angular/material';
+import { MatButtonModule, MatIconModule, MatTabsModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseDemoModule } from '@fuse/components/demo/demo.module';
@@ -160,7 +160,6 @@ const routes: Routes = [
 
         MatButtonModule,
         MatIconModule,
-        MatSidenavModule,
         MatTabsModule,
 
         FuseSidebarModule,

src/app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
         <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
-                (click)="toggleSidebar('simple-left-sidebar-4')">
+                (click)="toggleSidebar('simple-left-sidebar-3')">
             <mat-icon>menu</mat-icon>
         </button>
 

src/app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component.html

@@ -19,7 +19,7 @@
     <div class="content">
 
         <!-- SIDEBAR -->
-        <fuse-sidebar class="sidebar" name="simple-left-sidebar-3" position="left" lockedOpen="gt-md">
+        <fuse-sidebar class="sidebar" name="simple-left-sidebar-4" position="left" lockedOpen="gt-md">
 
             <!-- SIDEBAR CONTENT -->
             <div class="content p-24" fusePerfectScrollbar>

src/app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
         <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
-                (click)="toggleSidebar('simple-right-sidebar-4')">
+                (click)="toggleSidebar('simple-right-sidebar-3')">
             <mat-icon>menu</mat-icon>
         </button>
 

src/app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component.html

@@ -19,7 +19,7 @@
     <div class="content">
 
         <!-- SIDEBAR -->
-        <fuse-sidebar class="sidebar" name="simple-right-sidebar-3" position="left" lockedOpen="gt-md">
+        <fuse-sidebar class="sidebar" name="simple-right-sidebar-4" position="left" lockedOpen="gt-md">
 
             <!-- SIDEBAR CONTENT -->
             <div class="content p-24" fusePerfectScrollbar>

src/index.html

@@ -181,7 +181,7 @@
         <!-- / FUSE Splash Screen CSS -->
     </head>
 
-    <body class="mat-grey-100-bg">
+    <body>
 
         <!-- FUSE Splash Screen -->
         <fuse-splash-screen id="fuse-splash-screen">