Perfect Scrollbar enabled, missing attrs added

+ darken navbar bg color

package-lock.json

@@ -1180,6 +1180,7 @@
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
       "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
       "dev": true,
+      "optional": true,
       "requires": {
         "align-text": "0.1.4",
         "lazy-cache": "1.0.4"
@@ -1189,7 +1190,8 @@
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
           "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -2850,26 +2852,13 @@
       "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
       "dev": true,
       "requires": {
-        "cross-spawn": "5.1.0",
+        "cross-spawn": "3.0.1",
         "get-stream": "3.0.0",
         "is-stream": "1.1.0",
         "npm-run-path": "2.0.2",
         "p-finally": "1.0.0",
         "signal-exit": "3.0.2",
         "strip-eof": "1.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "4.1.1",
-            "shebang-command": "1.2.0",
-            "which": "1.2.14"
-          }
-        }
       }
     },
     "exit": {
@@ -5931,15 +5920,7 @@
       "dev": true,
       "requires": {
         "p-locate": "2.0.0",
-        "path-exists": "3.0.0"
-      },
-      "dependencies": {
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
+        "path-exists": "2.1.0"
       }
     },
     "lodash": {
@@ -8100,6 +8081,7 @@
       "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
       "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
       "dev": true,
+      "optional": true,
       "requires": {
         "align-text": "0.1.4"
       }
@@ -8442,21 +8424,6 @@
         }
       }
     },
-    "shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
-      "requires": {
-        "shebang-regex": "1.0.0"
-      }
-    },
-    "shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true
-    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -9352,48 +9319,28 @@
         "camelcase": {
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-          "dev": true
+          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
         },
         "cliui": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
-          "dev": true,
-          "requires": {
-            "center-align": "0.1.3",
-            "right-align": "0.1.3",
-            "wordwrap": "0.0.2"
-          }
+          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE="
         },
         "uglify-js": {
           "version": "2.8.29",
           "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
           "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
-          "dev": true,
-          "requires": {
-            "source-map": "0.5.6",
-            "uglify-to-browserify": "1.0.2",
-            "yargs": "3.10.0"
-          }
+          "dev": true
         },
         "wordwrap": {
           "version": "0.0.2",
           "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
-          "dev": true
+          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
         },
         "yargs": {
           "version": "3.10.0",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
-          "dev": true,
-          "requires": {
-            "camelcase": "1.2.1",
-            "cliui": "2.1.0",
-            "decamelize": "1.2.0",
-            "window-size": "0.1.0"
-          }
+          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E="
         }
       }
     },
@@ -10114,7 +10061,8 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
       "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "wordwrap": {
       "version": "0.0.3",

src/app/app.module.ts

@@ -11,16 +11,16 @@ import 'hammerjs';
 import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
 import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
-// import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
 import { PagesModule } from './main/content/pages/pages.module';
 import { UIModule } from './main/content/ui/ui.module';
 import { ComponentsModule } from './main/content/components/components.module';
 
-/*const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
+const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     suppressScrollX: true
-};*/
+};
 
 const appRoutes: Routes = [
     {
@@ -67,7 +67,7 @@ const appRoutes: Routes = [
 
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
 
-        // PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
+        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
 
         FuseMainModule,
 

src/app/core/modules/shared.module.ts

@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
 
 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
-// import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@@ -36,7 +36,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
         CommonModule,
         FormsModule,
         FusePipesModule,
-        // PerfectScrollbarModule,
+        PerfectScrollbarModule,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
@@ -52,7 +52,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
         FusePipesModule,
         FuseCountdownComponent,
         FuseHljsComponent,
-        // PerfectScrollbarModule,
+        PerfectScrollbarModule,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,

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

@@ -690,6 +690,7 @@
         <!-- SIDENAV -->
         <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
 
+            <div class="sidenav-content" perfect-scrollbar>
                 <!-- WIDGET GROUP -->
                 <div class="widget-group" fxLayout="column" fxFlex="100">
 
@@ -820,6 +821,7 @@
 
                 </div>
                 <!-- / WIDGET GROUP -->
+            </div>
 
         </md-sidenav>
         <!-- / SIDENAV -->

src/app/main/content/apps/file-manager/file-manager.component.html

@@ -10,7 +10,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center" fxFlex perfect-scrollbar>
+        <div class="center" fxFlex>
 
             <!-- HEADER -->
             <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
@@ -64,7 +64,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content" perfect-scrollbar>
                 <fuse-file-list></fuse-file-list>
             </div>
             <!-- / CONTENT -->
@@ -80,5 +80,4 @@
         <!-- / SIDENAV -->
 
     </md-sidenav-container>
-
 </div>

src/app/main/content/apps/file-manager/sidenavs/details/details.component.scss

@@ -12,7 +12,7 @@
     }
 
     > .content {
-        flex: 1 0 auto;
+        flex: 1;
 
         .file-details {
 

src/app/main/content/components/datatable/ngx-datatable.component.html

@@ -1,4 +1,4 @@
-<div id="ngx-datatable" class="page-layout simple fullwidth">
+<div id="ngx-datatable" class="page-layout simple fullwidth" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">

src/app/main/content/components/price-tables/price-tables.component.html

@@ -1,4 +1,4 @@
-<div id="price-tables" class="page-layout simple fullwidth">
+<div id="price-tables" class="page-layout simple fullwidth" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/pages/profile/profile.component.html

@@ -1,4 +1,4 @@
-<div id="profile" class="page-layout simple tabbed">
+<div id="profile" class="page-layout simple tabbed" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"

src/app/main/content/pages/search/search.component.html

@@ -1,4 +1,4 @@
-<div id="search" class="page-layout simple tabbed">
+<div id="search" class="page-layout simple tabbed" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"

src/app/main/content/ui/colors/colors.component.html

@@ -1,4 +1,4 @@
-<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
+<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

src/app/main/content/ui/forms/forms.component.html

@@ -1,4 +1,4 @@
-<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
+<div id="forms" class="page-layout simple fullwidth" fxLayout="column" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/helper-classes/helper-classes.component.html

@@ -1,4 +1,4 @@
-<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
+<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/icons/icons.component.html

@@ -1,4 +1,4 @@
-<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
+<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

src/app/main/content/ui/page-layouts/blank/blank.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout blank p-24">
+<div class="page-layout blank p-24" perfect-scrollbar>
 
     <h2>Blank Page</h2>
 

src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded fullwidth single-scroll">
+<div class="page-layout carded fullwidth single-scroll" perfect-scrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>

src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded left-sidenav single-scroll">
+<div class="page-layout carded left-sidenav single-scroll" perfect-scrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>

src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded right-sidenav single-scroll">
+<div class="page-layout carded right-sidenav single-scroll" perfect-scrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>

src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple fullwidth">
+<div class="page-layout simple fullwidth" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple left-sidenav single-scroll">
+<div class="page-layout simple left-sidenav single-scroll" perfect-scrollbar>
 
     <md-sidenav-container>
 

src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple right-sidenav single-scroll">
+<div class="page-layout simple right-sidenav single-scroll" perfect-scrollbar>
 
     <md-sidenav-container>
 

src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple tabbed">
+<div class="page-layout simple tabbed" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24">

src/app/main/content/ui/typography/typography.component.html

@@ -1,4 +1,4 @@
-<div id="typography" class="page-layout simple tabbed" fxLayout="column">
+<div id="typography" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/main.component.html

@@ -10,7 +10,7 @@
 
         <div id="wrapper">
 
-            <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
+            <fuse-navbar class="md-primary-700-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
 
             <div class="content-wrapper">