fuse2...

src/app/app.component.html

@@ -3,7 +3,7 @@
     <fuse-layout></fuse-layout>
 
     <!-- QUICK PANEL -->
-    <md-sidenav id="quick-panel" #quickPanel [fuseMdSidenavHelper]="quickPanel" align="end">
+    <md-sidenav fuseMdSidenavHelper="quick-panel" align="end">
         quick-panel
     </md-sidenav>
     <!-- / QUICK PANEL -->

src/app/app.module.ts

@@ -1,9 +1,10 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import 'hammerjs';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { RouterModule, Routes } from '@angular/router';
+import 'hammerjs';
 import { MailModule } from './main/apps/mail/mail.module';
 import { ChatModule } from './main/apps/chat/chat.module';
 import { ProjectModule } from './main/apps/dashboards/project/project.module';
@@ -16,29 +17,44 @@ import { SharedModule } from './core/modules/shared.module';
 import { FuseMdSidenavHelperService } from './core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { UIPageLayoutsModule } from './main/ui/page-layouts/page-layouts.module';
 import { FuseLayoutModule } from './core/components/layout/layout.module';
+import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { AngularFireModule } from 'angularfire2';
+import { environment } from "environments/environment";
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { MailListComponent } from './main/apps/mail/mail-list/mail-list.component';
+import { MailDetailsComponent } from './main/apps/mail/mail-details/mail-details.component';
+
+const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
+    suppressScrollX: true
+};
 
 const appRoutes: Routes = [
     {
-        path      : 'apps/mail',
+        path        : 'apps/mail',
         loadChildren: './main/apps/mail/mail.module#MailModule'
     },
     {
         path      : '**',
         redirectTo: 'apps/dashboards/project'
-    },
+    }
 ];
 
 @NgModule({
     declarations: [
         AppComponent,
-        SidenavComponent,
+        SidenavComponent
     ],
     imports     : [
         BrowserModule,
+        HttpClientModule,
         BrowserAnimationsModule,
         SharedModule,
         RouterModule.forRoot(appRoutes),
 
+        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
+        AngularFireModule.initializeApp(environment.firebase),
+        AngularFireDatabaseModule,
+
         FuseLayoutModule,
 
         // MailModule,

src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html

@@ -3,97 +3,97 @@
         <h3 md-subheader>Sidenav Demo</h3>
 
         <md-list-item>
-            <p>Sidenav Item 1</p>
+            <span>Sidenav Item 1</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 2</p>
+            <span>Sidenav Item 2</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 3</p>
+            <span>Sidenav Item 3</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 4</p>
+            <span>Sidenav Item 4</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 5</p>
+            <span>Sidenav Item 5</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 6</p>
+            <span>Sidenav Item 6</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 7</p>
+            <span>Sidenav Item 7</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 8</p>
+            <span>Sidenav Item 8</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 9</p>
+            <span>Sidenav Item 9</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 10</p>
+            <span>Sidenav Item 10</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 11</p>
+            <span>Sidenav Item 11</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 12</p>
+            <span>Sidenav Item 12</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 13</p>
+            <span>Sidenav Item 13</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 14</p>
+            <span>Sidenav Item 14</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 15</p>
+            <span>Sidenav Item 15</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 16</p>
+            <span>Sidenav Item 16</span>
         </md-list-item>
 
     </md-list>

src/app/core/components/layout/content/content.component.ts

@@ -1,19 +1,34 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { NavigationEnd, Router } from '@angular/router';
 
 @Component({
-    selector   : 'fuse-content',
-    templateUrl: './content.component.html',
-    styleUrls  : ['./content.component.scss']
+    selector     : 'fuse-content',
+    templateUrl  : './content.component.html',
+    styleUrls    : ['./content.component.scss']
 })
 export class FuseContentComponent implements OnInit
 {
-
-    constructor()
+    constructor(
+        private router: Router,
+        private perfectScrollbarDirective: PerfectScrollbarDirective
+    )
     {
+
     }
 
     ngOnInit()
     {
+        this.router.events.subscribe((event) =>
+            {
+                if ( event instanceof NavigationEnd )
+                {
+                    setTimeout(() =>
+                    {
+                        this.perfectScrollbarDirective.scrollToTop();
+                    }, 0);
+                }
+            }
+        );
     }
-
 }

src/app/core/components/layout/layout.component.html

@@ -17,7 +17,7 @@
             </ng-container>
             <!-- / TOOLBAR: Below -->
 
-            <fuse-content></fuse-content>
+            <fuse-content perfect-scrollbar></fuse-content>
 
             <!-- FOOTER: Below -->
             <ng-container *ngIf="layoutSettings.footer === 'below'">
@@ -43,7 +43,7 @@
             </ng-container>
             <!-- / TOOLBAR: Below -->
 
-            <fuse-content></fuse-content>
+            <fuse-content perfect-scrollbar></fuse-content>
 
             <!-- FOOTER: Below -->
             <ng-container *ngIf="layoutSettings.footer === 'below'">
@@ -67,7 +67,7 @@
             </ng-container>
             <!-- / TOOLBAR: Below -->
 
-            <fuse-content></fuse-content>
+            <fuse-content perfect-scrollbar></fuse-content>
 
             <!-- FOOTER: Below -->
             <ng-container *ngIf="layoutSettings.footer === 'below'">

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

@@ -1,4 +1,4 @@
-:host {
+fuse-layout {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -20,7 +20,12 @@
                 height: 100%;
                 overflow-x: hidden;
                 overflow-y: auto;
+
+                > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
+                    width: 100%;
+                    min-width: 100%;
+                }
             }
         }
     }
-}
+}

src/app/core/components/layout/layout.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FuseLayoutService } from '../../services/layout.service';
 
 @Component({
-    selector   : 'fuse-layout',
-    templateUrl: './layout.component.html',
-    styleUrls  : ['./layout.component.scss']
+    selector     : 'fuse-layout',
+    templateUrl  : './layout.component.html',
+    styleUrls    : ['./layout.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FuseLayoutComponent implements OnInit
 {
@@ -24,7 +25,6 @@ export class FuseLayoutComponent implements OnInit
                     this.layoutSettings = newSettings;
                 }
             );
-
     }
 
 }

src/app/core/components/layout/navbar/navbar.component.html

@@ -13,5 +13,6 @@
     </button>
 
 </div>
-
-<fuse-navigation></fuse-navigation>
+<div class="navbar-content" perfect-scrollbar>
+    <fuse-navigation></fuse-navigation>
+</div>

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

@@ -1,7 +1,8 @@
 @import "../../../scss/fuse";
 
 :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 256px;
     min-width: 256px;
     max-width: 256px;
@@ -49,6 +50,7 @@
         display: flex;
         align-items: center;
         height: 64px;
+        min-height: 64px;
         justify-content: space-between;
 
         .logo {
@@ -85,4 +87,8 @@
              box-sizing: border-box;*/
         }
     }
+
+    .nav-bar-content {
+        flex: 1;
+    }
 }

src/app/core/components/layout/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angular/core';
+import {Component, HostBinding, HostListener, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
 import { AppComponent } from '../../../../app.component';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseMatchMedia } from '../../../services/match-media.service';

src/app/core/components/navigation/nav-item/nav-item.component.scss

@@ -0,0 +1,13 @@
+:host {
+
+    .folded:not(.folded-open) & {
+
+        .nav-link {
+
+            > span {
+                opacity: 0;
+                transition: opacity 200ms ease;
+            }
+        }
+    }
+}

src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss

@@ -0,0 +1,19 @@
+
+:host {
+
+    .folded:not(.folded-open) & {
+
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            min-width: 1.6rem;
+            border-top: 2px solid rgba(0, 0, 0, .12);
+        }
+
+        > span {
+            opacity: 0;
+            transition: opacity 200ms ease;
+        }
+    }
+}

src/app/core/components/navigation/navigation.model.ts

@@ -58,7 +58,7 @@ export class FuseNavigation
                 'title': 'Mail',
                 'type' : 'nav-item',
                 'icon' : 'email',
-                'url'  : '/apps/mail'
+                'url'  : '/apps/mail/inbox'
             },
             {
                 'title': 'Chat',
@@ -309,7 +309,7 @@ export class FuseNavigation
                                 'url'  : '/ui/page-layouts/carded/right-sidenav'
                             },
                             {
-                                'title': 'Right Sidenav',
+                                'title': 'Right Sidenav 2',
                                 'type' : 'nav-item',
                                 'url'  : '/ui/page-layouts/carded/right-sidenav-2'
                             }

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

@@ -1,61 +1,78 @@
-import { Directive, Input, OnInit, HostListener, ElementRef, AfterViewInit, HostBinding } from '@angular/core';
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseMatchMedia } from '../../services/match-media.service';
-import { MediaMonitor, ObservableMedia } from '@angular/flex-layout';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
 
 @Directive({
     selector: '[fuseMdSidenavHelper]'
 })
-export class FuseMdSidenavHelperDirective implements OnInit
+export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDestroy
 {
-    @Input('fuseMdSidenavHelper') mdSidenavInstance: MdSidenav;
-    @Input('md-is-locked-open') mdIsLockedOpen: string;
+    matchMediaSubscription: Subscription;
+
+    @HostBinding('class.md-is-locked-open') isLockedOpen = true;
+    @HostBinding('class.md-stop-transition') stopTransition = true;
+
+    @Input('fuseMdSidenavHelper') id: string;
+    @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
 
     constructor(
         private fuseMdSidenavService: FuseMdSidenavHelperService,
-        private elRef: ElementRef,
         private fuseMatchMedia: FuseMatchMedia,
-        private observableMedia: ObservableMedia
+        private observableMedia: ObservableMedia,
+        private mdSidenav: MdSidenav
     )
     {
     }
 
     ngOnInit()
     {
-        this.fuseMdSidenavService.setSidenav(this.elRef.nativeElement.id, this.mdSidenavInstance);
+        this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
 
-        console.warn(this.mdIsLockedOpen);
-
-        if ( this.observableMedia.isActive(this.mdIsLockedOpen) )
+        if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
         {
-            this.mdSidenavInstance.open();
-            this.mdSidenavInstance.mode = 'side';
+            this.isLockedOpen = true;
+            this.mdSidenav.mode = 'side';
+            this.mdSidenav.open();
         }
         else
         {
-            this.mdSidenavInstance.close();
-            this.mdSidenavInstance.mode = 'over';
+            this.isLockedOpen = false;
+            this.mdSidenav.mode = 'over';
+            this.mdSidenav.close();
         }
 
-        this.fuseMatchMedia.onMediaChange.subscribe((change) =>
+        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() =>
         {
-            console.log(this.observableMedia.isActive(this.mdIsLockedOpen));
-
-            if ( this.observableMedia.isActive(this.mdIsLockedOpen) )
+            if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
             {
-                this.mdSidenavInstance.open();
-                this.mdSidenavInstance.mode = 'side';
+                this.isLockedOpen = true;
+                this.mdSidenav.mode = 'side';
+                this.mdSidenav.open();
             }
             else
             {
-                this.mdSidenavInstance.close();
-                this.mdSidenavInstance.mode = 'over';
+                this.isLockedOpen = false;
+                this.mdSidenav.mode = 'over';
+                this.mdSidenav.close();
             }
         });
 
-        console.warn(this.mdIsLockedOpen);
+    }
 
+    ngAfterViewInit()
+    {
+        setTimeout(() =>
+        {
+            this.stopTransition = false;
+        }, 0);
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaSubscription.unsubscribe();
     }
 }
 
@@ -65,7 +82,6 @@ export class FuseMdSidenavHelperDirective implements OnInit
 export class FuseMdSidenavTogglerDirective
 {
     @Input('fuseMdSidenavToggler') id;
-    instance: MdSidenav;
 
     constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
     {
@@ -74,7 +90,6 @@ export class FuseMdSidenavTogglerDirective
     @HostListener('click')
     onClick()
     {
-        this.instance = this.fuseMdSidenavService.getSidenav(this.id);
-        this.instance.toggle();
+        this.fuseMdSidenavService.getSidenav(this.id).toggle();
     }
 }

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

@@ -1,9 +1,13 @@
-import { NgModule } from '@angular/core';
-import { MaterialModule } from './material.module';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import {NgModule} from '@angular/core';
+import {MaterialModule} from './material.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {
+    FuseMdSidenavHelperDirective,
+    FuseMdSidenavTogglerDirective
+} from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
 
 @NgModule({
     declarations: [
@@ -14,7 +18,8 @@ import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../
         FlexLayoutModule,
         MaterialModule,
         CommonModule,
-        FormsModule
+        FormsModule,
+        PerfectScrollbarModule
     ],
     exports     : [
         FlexLayoutModule,
@@ -22,7 +27,8 @@ import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../
         CommonModule,
         FormsModule,
         FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective
+        FuseMdSidenavTogglerDirective,
+        PerfectScrollbarModule
     ]
 })
 

src/app/core/scss/core.scss

@@ -1,3 +1,4 @@
+@import "~perfect-scrollbar/src/css/main";
 // Fuse
 @import "fuse";
 
@@ -23,3 +24,6 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
+
+// Plugins
+@import "partials/plugins/plugins";

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

@@ -1,10 +1,3 @@
-.mat-body {
-
-    p {
-        margin: 0;
-    }
-}
-
 .mat-icon-button {
 
     .mat-button-ripple {

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

@@ -25,8 +25,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
     &.carded {
         display: flex;
         flex-direction: row;
-        min-height: 100%;
+        width: 100%;
         height: 100%;
+        min-width: 100%;
+        min-height: 100%;
 
         // Fullwidth
         &.fullwidth {
@@ -94,27 +96,19 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
         }
 
         // Left sidenav
-        &.left-sidenav {
+        &.left-sidenav,
+        &.right-sidenav {
 
             // Single scroll
             &.single-scroll {
                 height: auto;
-
-                > .center {
-
-                    .content-card {
-
-                        .content {
-                            overflow: hidden;
-                        }
-                    }
-                }
             }
 
-            // Sidenav
             > md-sidenav-container {
+                display: flex;
                 background: none;
                 z-index: 2;
+                width: 100%;
 
                 .sidenav {
                     display: flex;
@@ -126,6 +120,19 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     overflow-y: hidden;
                     @include mat-elevation(7);
 
+                    &.md-is-locked-open {
+                        position: relative;
+                        background: none;
+                        box-shadow: none;
+                    }
+
+                    &.md-stop-transition {
+
+                        ~ .mat-sidenav-content {
+                            transition: none;
+                        }
+                    }
+
                     .header {
                         height: $header-height;
                         min-height: $header-height;
@@ -138,38 +145,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         padding: 24px;
                         overflow: auto;
                     }
-
-                    @include media-breakpoint('gt-md') {
-                        background: none;
-                        box-shadow: none;
-                    }
-
-                    /*&.md-locked-open {
-                        width: 220px;
-                        min-width: 220px;
-                        max-width: 220px;
-                        z-index: 2;
-                        background: transparent;
-                        box-shadow: none;
-
-                        + .center {
-                            margin-left: 0;
-                        }
-                    }
-
-                    &:not(.md-locked-open) {
-
-                        .header {
-                            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-                        }
-
-                        .content {
-                            overflow: hidden;
-                        }
-                    }*/
                 }
 
                 .mat-sidenav-content {
+                    flex: 1;
                     overflow: visible;
 
                     // Center
@@ -183,10 +162,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         margin-left: 32px;
                         margin-right: 32px;
 
-                        @include media-breakpoint('gt-md') {
-                            margin-left: 0;
-                        }
-
                         .header {
                             display: flex;
                             height: $card-header-height;
@@ -234,104 +209,47 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
             }
         }
 
+        // Left sidenav
+        &.left-sidenav {
+
+            // Sidenav
+            > md-sidenav-container {
+
+                .sidenav {
+
+                    &.md-is-locked-open {
+
+                        ~ .mat-sidenav-content {
+                            margin-left: 0 !important;
+
+                            .center {
+                                margin-left: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
         // Right sidenav
         &.right-sidenav {
 
-            // Single scroll
-            &.single-scroll {
-                height: auto;
-
-                > .center {
-
-                    .content-card {
-
-                        .content {
-                            overflow: hidden;
-                        }
-                    }
-                }
-            }
-
             // Sidenav
-            > .sidenav {
-                width: 240px;
-                min-width: 240px;
-                max-width: 240px;
-                z-index: 51;
-                @include mat-elevation(7);
+            > md-sidenav-container {
 
-                .header {
-                    height: $header-height;
-                    min-height: $header-height;
-                    max-height: $header-height;
-                    padding: 24px 24px 24px 0;
-                }
+                .sidenav {
+                    order: 999;
 
-                .content {
-                    background: transparent;
-                    padding: 24px 24px 24px 0;
-                }
+                    &.md-is-locked-open {
 
-                &.md-locked-open {
-                    width: 196px;
-                    min-width: 196px;
-                    max-width: 196px;
-                    z-index: 2;
-                    background: transparent;
-                    box-shadow: none;
-                }
+                        ~ .mat-sidenav-content {
+                            margin-right: 0px !important;
 
-                &:not(.md-locked-open) {
-
-                    .header {
-                        padding: 24px;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-                    }
-
-                    .content {
-                        overflow: hidden;
-                        padding: 24px;
-                    }
-                }
-            }
-
-            // Center
-            > .center {
-                position: relative;
-                z-index: 2;
-                margin-left: 32px;
-                margin-right: 32px;
-
-                .header {
-                    height: $card-header-height;
-                    min-height: $card-header-height;
-                    max-height: $card-header-height;
-                    padding: 24px;
-                }
-
-                .content-card {
-                    background: #FFFFFF;
-                    overflow: hidden;
-                    @include mat-elevation(7);
-
-                    .toolbar {
-                        padding: 8px 24px;
-                        height: $card-toolbar-height;
-                        min-height: $card-toolbar-height;
-                        max-height: $card-toolbar-height;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-
-                        .sidenav-toggle {
-                            margin: 0 0 0 8px !important;
-                            padding: 0 !important;
-                            border-radius: 0;
+                            .center {
+                                margin-right: 0;
+                            }
                         }
                     }
-
-                    .content {
-                        padding: 24px;
-                        background: #FFFFFF;
-                    }
                 }
             }
         }

src/app/core/scss/partials/plugins/_perfect-scrollbar.scss

@@ -0,0 +1,10 @@
+.ps {
+
+    > .ps__scrollbar-y-rail {
+        z-index: 99999;
+    }
+
+    > .ps__scrollbar-y-rail {
+        z-index: 99999;
+    }
+}

src/app/core/scss/partials/plugins/_plugins.scss

@@ -0,0 +1 @@
+@import "perfect-scrollbar";

src/app/main/apps/mail/mail-details/mail-details.component.html

@@ -0,0 +1,3 @@
+<p>
+  mail-details works!
+</p>

src/app/main/apps/mail/mail-details/mail-details.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fuse-mail-details',
+  templateUrl: './mail-details.component.html',
+  styleUrls: ['./mail-details.component.scss']
+})
+export class MailDetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html

@@ -0,0 +1,5 @@
+<ul>
+    <li>
+        {{ mail.subject }}
+    </li>
+</ul>

src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MailModel } from '../../mail.model';
+
+@Component({
+    selector   : 'fuse-mail-list-item',
+    templateUrl: './mail-list-item.component.html',
+    styleUrls  : ['./mail-list-item.component.scss']
+})
+export class MailListItemComponent implements OnInit
+{
+    @Input() mail: MailModel;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+        console.log('mail list item inited');
+    }
+
+}

src/app/main/apps/mail/mail-list/mail-list.component.html

@@ -0,0 +1 @@
+<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail"></fuse-mail-list-item>

src/app/main/apps/mail/mail-list/mail-list.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+
+@Component({
+    selector   : 'fuse-mail-list',
+    templateUrl: './mail-list.component.html',
+    styleUrls  : ['./mail-list.component.scss']
+})
+export class MailListComponent implements OnInit
+{
+    mailsDB: FirebaseListObservable<any[]>;
+    mails: any;
+
+    constructor(private db: AngularFireDatabase)
+    {
+        this.mailsDB = this.db.list('/mail/data', {
+            query: {
+                orderByChild: 'important',
+                equalTo     : true
+            }
+        });
+    }
+
+    ngOnInit()
+    {
+        this.mailsDB.subscribe((response) =>
+        {
+            console.log('mail list component inited');
+            console.log(response);
+
+            this.mails = response;
+        });
+
+    }
+
+    onSave()
+    {
+        // this.mailList.push({name: 'Mustafa'});
+        this.mails.push({subject: 'deneme'});
+
+        // this.mails.update({test: 'deneme'});
+        // this.mails.set({test: 'deneme'});
+
+        /*this.mails.set({
+         name: 'sercan',
+         age : 29
+         });*/
+
+        console.log(this.mails);
+    }
+
+    onGet()
+    {
+        this.mails.subscribe((response) =>
+        {
+
+            console.log(response);
+        });
+
+        /*const get = this.http.get('https://fuse2-demo.firebaseio.com/mail.json');
+
+         get.subscribe((response) =>
+         {
+         console.log(response);
+         });*/
+    }
+
+    onGoOnline()
+    {
+        this.db.database.goOnline();
+    }
+
+    onGoOffline()
+    {
+        this.db.database.goOffline();
+    }
+
+}

src/app/main/apps/mail/mail.component.html

@@ -1,13 +1,72 @@
-<md-sidenav-container id="mail" class="example-sidenav-fab-container" fxLayout="row" fxfill>
+<div class="page-layout carded left-sidenav">
 
-    <md-sidenav #sidenav mode="side" opened="true" fxFlex="240px">
-        <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
-    </md-sidenav>
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
 
-    <div class="content">
-        <a md-mini-fab class="sidenav-toggle-button" (click)="sidenav.toggle()">
-            <md-icon>menu</md-icon>
-        </a>
-        <router-outlet name="view"></router-outlet>
-    </div>
-</md-sidenav-container>
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+
+                Sidenav
+
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Left sidenav with content scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-left-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-mail-list></fuse-mail-list>
+
+                    <fuse-mail-details></fuse-mail-details>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>

src/app/main/apps/mail/mail.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { FuseLayoutService } from '../../../core/services/layout.service';
+import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+import { ActivatedRoute, Data } from '@angular/router';
 
 @Component({
     selector   : 'fuse-mail',
@@ -8,19 +9,28 @@ import { FuseLayoutService } from '../../../core/services/layout.service';
 })
 export class MailComponent implements OnInit
 {
+    mails: FirebaseListObservable<any[]>;
 
-    constructor(private layoutService: FuseLayoutService)
+    constructor(private db: AngularFireDatabase, private route: ActivatedRoute)
     {
-        this.layoutService.setSettings({
-            navigation: 'left',
-            toolbar   : 'below',
-            footer    : 'below'
-        });
+        console.log('mail component inited');
+
+        // this.mails = db.list('/mail/data');
+
+        /*this.mails.subscribe(response =>
+         {
+         console.log(response);
+
+         console.log('going offline...');
+         this.db.database.goOffline();
+         });*/
     }
 
     ngOnInit()
     {
-
+        this.route.data.subscribe((data: Data) =>
+        {
+            console.warn(data['mails']);
+        });
     }
-
 }

src/app/main/apps/mail/mail.model.ts

@@ -0,0 +1,11 @@
+export class MailModel
+{
+    id: string;
+    subject: string;
+    important: string;
+
+    constructor()
+    {
+
+    }
+}

src/app/main/apps/mail/mail.module.ts

@@ -1,33 +1,66 @@
-import { NgModule } from '@angular/core';
+import { Injectable, NgModule } from '@angular/core';
 import { SharedModule } from '../../../core/modules/shared.module';
-import { RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 import { MailComponent } from './mail.component';
 import { MainSidenavComponent } from './sidenavs/main/main-sidenav.component';
-import { ClassicViewComponent } from './views/classic/classic-view.component';
+import { MailListItemComponent } from './mail-list/mail-list-item/mail-list-item.component';
+import { MailListComponent } from './mail-list/mail-list.component';
+import { MailDetailsComponent } from './mail-details/mail-details.component';
+import { Observable } from 'rxjs/Observable';
+import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+
+@Injectable()
+export class MailsResolver implements Resolve<any>
+{
+    mails: FirebaseListObservable<any[]>;
+
+    constructor(private db: AngularFireDatabase)
+    {
+        console.log('Mails Resolver constructor..');
+        this.mails = db.list('/mail/data');
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+        return new Promise((resolve, reject) =>
+        {
+            this.mails.subscribe(response =>
+            {
+                console.log('resolver....');
+                console.log('going offline...');
+                this.db.database.goOffline();
+
+                resolve(response);
+
+            }, reject);
+        });
+    }
+}
 
 const routes: Routes = [
     {
-        path     : '',
+        path     : 'inbox',
         component: MailComponent,
-        children : [
-            {
-                path     : '',
-                component: ClassicViewComponent,
-                outlet   : 'view'
-            }
-        ]
+        resolve  : {
+            mails: MailsResolver
+        }
     }
 ];
 
 @NgModule({
+    declarations: [
+        MailComponent,
+        MainSidenavComponent,
+        MailListComponent,
+        MailListItemComponent,
+        MailDetailsComponent
+    ],
     imports     : [
         SharedModule,
         RouterModule.forChild(routes)
     ],
-    declarations: [
-        MailComponent,
-        MainSidenavComponent,
-        ClassicViewComponent
+    providers   : [
+        MailsResolver
     ]
 })
 export class MailModule

src/app/main/apps/mail/views/classic/classic-view.component.html

@@ -1,3 +0,0 @@
-<p>
-  classic view
-</p>

src/app/main/apps/mail/views/classic/classic-view.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'fuse-mail-classic-view',
-  templateUrl: './classic-view.component.html',
-  styleUrls: ['./classic-view.component.scss']
-})
-export class ClassicViewComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-
-}

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

@@ -23,7 +23,7 @@
             <!-- / CONTENT TOOLBAR -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content" perfect-scrollbar>
 
                 <fuse-demo-content></fuse-demo-content>
 

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

@@ -0,0 +1,68 @@
+<div class="page-layout carded left-sidenav single-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Left sidenav with page scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-left-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-demo-content></fuse-demo-content>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-left-sidenav-2',
+    templateUrl: './left-sidenav-2.component.html',
+    styleUrls  : ['./left-sidenav-2.component.scss']
+})
+export class CardedLeftSidenav2Component
+{
+    constructor()
+    {
+    }
+
+}

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

@@ -4,20 +4,20 @@
     <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
-    <!-- SIDENAV -->
     <md-sidenav-container>
 
-        <md-sidenav id="carded-left-sidenav" #cardedLeftSidenav class="sidenav" align="start" opened="true" mode="side"
-                    [fuseMdSidenavHelper]="cardedLeftSidenav" md-is-locked-open="gt-md">
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
             <div class="header">
-                <p>Sidenav header</p>
+                <span>Sidenav header</span>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content">
+            <div class="content" perfect-scrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->
@@ -39,17 +39,18 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar">
-                    <button md-button class="mat-icon-button" [fuseMdSidenavToggler]="'carded-left-sidenav'"
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md>
                         <md-icon>menu</md-icon>
                     </button>
 
-                    <p>Content toolbar</p>
+                    <span>Content toolbar</span>
                 </div>
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content">
+                <div class="content" perfect-scrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 

src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts

@@ -1,25 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-left-sidenav',
+    selector   : 'fuse-carded-left-sidenav',
     templateUrl: './left-sidenav.component.html',
     styleUrls  : ['./left-sidenav.component.scss']
 })
-export class CardedLeftSidenavComponent implements OnInit
+export class CardedLeftSidenavComponent
 {
-    sidenavMode: string;
-
     constructor()
     {
-
-        this.sidenavMode = 'side';
     }
 
-    ngOnInit()
-    {
-        setTimeout(() =>
-        {
-            this.sidenavMode = 'over'
-        }, 1000);
-    }
 }

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

@@ -0,0 +1,68 @@
+<div class="page-layout carded right-sidenav single-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Right sidenav with page scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-right-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-demo-content></fuse-demo-content>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-right-sidenav-2',
+    templateUrl: './right-sidenav-2.component.html',
+    styleUrls  : ['./right-sidenav-2.component.scss']
+})
+export class CardedRightSidenav2Component
+{
+    constructor()
+    {
+    }
+
+}

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

@@ -0,0 +1,68 @@
+<div class="page-layout carded right-sidenav">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Right sidenav with content scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-right-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-demo-content></fuse-demo-content>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>

src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-right-sidenav',
+    templateUrl: './right-sidenav.component.html',
+    styleUrls  : ['./right-sidenav.component.scss']
+})
+export class CardedRightSidenavComponent
+{
+    constructor()
+    {
+    }
+
+}

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

@@ -1,10 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
 import { SharedModule } from '../../../core/modules/shared.module';
-import { CardedFullWidth2Component } from './carded/fullwidth-single-scroll/fullwidth-2.component';
 import { FuseDemoModule } from '../../../core/components/demo/demo.module';
+import { CardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
+import { CardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
 import { CardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component';
+import { CardedLeftSidenav2Component } from './carded/left-sidenav-2/left-sidenav-2.component';
+import { CardedRightSidenavComponent } from './carded/right-sidenav/right-sidenav.component';
+import { CardedRightSidenav2Component } from './carded/right-sidenav-2/right-sidenav-2.component';
 
 const routes: Routes = [
     {
@@ -21,6 +24,21 @@ const routes: Routes = [
         path     : 'ui/page-layouts/carded/left-sidenav',
         component: CardedLeftSidenavComponent,
         children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/left-sidenav-2',
+        component: CardedLeftSidenav2Component,
+        children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/right-sidenav',
+        component: CardedRightSidenavComponent,
+        children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/right-sidenav-2',
+        component: CardedRightSidenav2Component,
+        children : []
     }
 ];
 
@@ -33,7 +51,10 @@ const routes: Routes = [
     declarations: [
         CardedFullWidthComponent,
         CardedFullWidth2Component,
-        CardedLeftSidenavComponent
+        CardedLeftSidenavComponent,
+        CardedLeftSidenav2Component,
+        CardedRightSidenavComponent,
+        CardedRightSidenav2Component
     ]
 })
 export class UIPageLayoutsModule

src/environments/environment.ts

@@ -4,5 +4,13 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+    production: false,
+    firebase  : {
+        apiKey           : 'AIzaSyDYFfhaC5QaKPgPhh8YqohjhfUpcYlg33c',
+        // authDomain       : '<your-project-authdomain>',
+        databaseURL      : 'https://fuse2-demo.firebaseio.com/',
+        projectId        : 'fuse2-demo',
+        // storageBucket    : '<your-storage-bucket>',
+        // messagingSenderId: '<your-messaging-sender-id>'
+    }
 };