fuse2...

src/app/app.module.ts

@@ -4,62 +4,54 @@ import 'hammerjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { RouterModule, Routes } from '@angular/router';
-import { LayoutComponent } from './core/components/layout/layout.component';
 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';
-import { CardedFullWidthModule } from './main/ui/page-layouts/carded/fullwidth/fullwidth.module';
-import { LayoutService } from './core/services/layout.service';
-import { NavbarComponent } from './core/components/layout/navbar/navbar.component';
-import { ToolbarComponent } from './core/components/layout/toolbar/toolbar.component';
-import { NavigationModule } from './core/components/navigation/navigation.module';
-import { NavigationService } from './core/components/navigation/navigation.service';
+import { FuseLayoutService } from './core/services/layout.service';
+import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { SidenavComponent } from './core/components/sidenav/sidenav.component';
 import { FuseMatchMedia } from './core/services/match-media.service';
-import { NavbarToggleDirective } from './core/components/layout/navbar/navbar-toggle.directive';
-import { NavbarService } from './core/components/layout/navbar/navbar.service';
-import { ContentComponent } from './core/components/layout/content/content.component';
+import { FuseNavbarService } from './core/components/layout/navbar/navbar.service';
 import { SharedModule } from './core/modules/shared.module';
-import { FooterComponent } from './core/components/layout/footer/footer.component';
-import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from './core/directives/md-sidenav-helper/md-sidenav-helper.directive';
 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';
 
 const appRoutes: Routes = [
+    {
+        path      : 'apps/mail',
+        loadChildren: './main/apps/mail/mail.module#MailModule'
+    },
     {
         path      : '**',
         redirectTo: 'apps/dashboards/project'
-    }
+    },
 ];
 
 @NgModule({
     declarations: [
         AppComponent,
-        LayoutComponent,
-        ToolbarComponent,
-        NavbarComponent,
         SidenavComponent,
-        NavbarToggleDirective,
-        FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
-        ContentComponent,
-        FooterComponent
     ],
     imports     : [
-        SharedModule,
         BrowserModule,
         BrowserAnimationsModule,
+        SharedModule,
         RouterModule.forRoot(appRoutes),
-        NavigationModule,
-        MailModule,
+
+        FuseLayoutModule,
+
+        // MailModule,
         ChatModule,
         ProjectModule,
-        CardedFullWidthModule
+
+        UIPageLayoutsModule
     ],
     providers   : [
-        NavigationService,
-        LayoutService,
+        FuseNavigationService,
+        FuseLayoutService,
         FuseMatchMedia,
-        NavbarService,
+        FuseNavbarService,
         FuseMdSidenavHelperService
     ],
     bootstrap   : [AppComponent]

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

@@ -0,0 +1,75 @@
+<!-- DEMO CONTENT -->
+<div class="demo-content">
+
+  <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
+
+  <h1>Early Sunrise</h1>
+  <h4 class="secondary-text">Demo Content</h4>
+
+  <p>
+    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a
+    horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his
+    brown belly, slightly domed and divided by arches into stiff sections.
+  </p>
+
+  <blockquote>
+    <p>
+      The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs,
+      pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's
+      happened to me? " he thought. It wasn't a dream.
+    </p>
+    <footer>
+      John Doe
+    </footer>
+  </blockquote>
+
+  <p>
+    His room, a proper human room although a little too small, lay peacefully between its four familiar
+    walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman -
+    and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in
+    a nice, gilded frame.
+  </p>
+
+  <p>
+    It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that
+    covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the
+    dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad.
+  </p>
+
+  <p>
+    "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was
+    something he was unable to do because he was used to sleeping on his right, and in his present state
+    couldn't get into that position. However hard he threw himself onto his right, he always rolled back to
+    where he was.
+  </p>
+
+  <p>
+    He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering
+    legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. "Oh,
+    God", he thought, "what a strenuous career it is that I've chosen!
+  </p>
+
+  <p>
+    Travelling day in and day out. Doing business like this takes much more effort than doing your own
+    business at home, and on top of that there's the curse of travelling, worries about making train
+    connections, bad and irregular food, contact with different people all the time so that you can never
+    get to know anyone or become friendly with them.
+  </p>
+
+  <p>
+    "He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so
+    that he could lift his head better; found where the itch was, and saw that it was covered with lots of
+    little white spots which he didn't know what to make of; and when he tried to feel the place with one of
+    his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder. He
+    slid back into his former position.
+  </p>
+
+  <p>
+    "Getting up early all the time", he thought, "it makes you stupid. You've got to get enough sleep. Other
+    travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during
+    the morning to copy out the contract, these gentlemen are always still sitting there eating their
+    breakfasts. I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe
+    that would be the best thing for me...
+  </p>
+</div>
+<!-- / DEMO CONTENT -->

src/app/core/components/demo/demo-content/demo-content.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-demo-content',
+    templateUrl: './demo-content.component.html',
+    styleUrls  : ['./demo-content.component.scss']
+})
+export class FuseDemoContentComponent
+{
+    constructor()
+    {
+    }
+}

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

@@ -0,0 +1,100 @@
+<div class="demo-sidenav">
+    <md-list>
+        <h3 md-subheader>Sidenav Demo</h3>
+
+        <md-list-item>
+            <p>Sidenav Item 1</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 2</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 3</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 4</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 5</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 6</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 7</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 8</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 9</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 10</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 11</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 12</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 13</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 14</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 15</p>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <p>Sidenav Item 16</p>
+        </md-list-item>
+
+    </md-list>
+</div>

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

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

src/app/core/components/demo/demo.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { FuseDemoContentComponent } from './demo-content/demo-content.component';
+import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
+
+@NgModule({
+    declarations: [
+        FuseDemoContentComponent,
+        FuseDemoSidenavComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule
+    ],
+    exports     : [
+        FuseDemoContentComponent,
+        FuseDemoSidenavComponent
+    ]
+})
+export class FuseDemoModule
+{
+}

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

@@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
     templateUrl: './content.component.html',
     styleUrls  : ['./content.component.scss']
 })
-export class ContentComponent implements OnInit
+export class FuseContentComponent implements OnInit
 {
 
     constructor()

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

@@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss']
 })
-export class FooterComponent implements OnInit {
+export class FuseFooterComponent implements OnInit {
 
   constructor() { }
 

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

@@ -1,16 +1,16 @@
 import { Component, OnInit } from '@angular/core';
-import { LayoutService } from '../../services/layout.service';
+import { FuseLayoutService } from '../../services/layout.service';
 
 @Component({
     selector   : 'fuse-layout',
     templateUrl: './layout.component.html',
     styleUrls  : ['./layout.component.scss']
 })
-export class LayoutComponent implements OnInit
+export class FuseLayoutComponent implements OnInit
 {
     layoutSettings: { navigation: string, toolbar: string, footer: string };
 
-    constructor(private layoutService: LayoutService)
+    constructor(private layoutService: FuseLayoutService)
     {
         this.layoutSettings = layoutService.getSettings();
     }

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

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { FuseLayoutComponent } from './layout.component';
+import { FuseContentComponent } from './content/content.component';
+import { FuseFooterComponent } from './footer/footer.component';
+import { FuseNavbarComponent } from './navbar/navbar.component';
+import { FuseToolbarComponent } from './toolbar/toolbar.component';
+import { FuseNavigationModule } from '../navigation/navigation.module';
+import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
+
+@NgModule({
+    declarations: [
+        FuseContentComponent,
+        FuseFooterComponent,
+        FuseLayoutComponent,
+        FuseNavbarComponent,
+        FuseToolbarComponent,
+        FuseNavbarToggleDirective
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        FuseLayoutComponent
+    ]
+})
+
+export class FuseLayoutModule
+{
+}

src/app/core/components/layout/navbar/navbar-toggle.directive.ts

@@ -1,16 +1,16 @@
 import { Directive, HostListener, Input } from '@angular/core';
-import {NavbarService} from './navbar.service';
-import {NavbarComponent} from './navbar.component';
+import { FuseNavbarService } from './navbar.service';
+import { FuseNavbarComponent } from './navbar.component';
 
 @Directive({
-    selector: '[fuseNavbar]',
+    selector: '[fuseNavbar]'
 })
-export class NavbarToggleDirective
+export class FuseNavbarToggleDirective
 {
     @Input() fuseNavbar: string;
-    navbar: NavbarComponent;
+    navbar: FuseNavbarComponent;
 
-    constructor(navbar: NavbarService)
+    constructor(navbar: FuseNavbarService)
     {
         this.navbar = navbar.getNavBar();
     }

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

@@ -2,14 +2,14 @@ import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angula
 import { AppComponent } from '../../../../app.component';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseMatchMedia } from '../../../services/match-media.service';
-import { NavbarService } from './navbar.service';
+import { FuseNavbarService } from './navbar.service';
 
 @Component({
     selector   : 'fuse-navbar',
     templateUrl: './navbar.component.html',
     styleUrls  : ['./navbar.component.scss']
 })
-export class NavbarComponent implements OnInit, OnDestroy
+export class FuseNavbarComponent implements OnInit, OnDestroy
 {
     @HostBinding('class.close') isClosed: boolean;
     @HostBinding('class.open') isOpened: boolean = !this.isClosed;
@@ -22,7 +22,7 @@ export class NavbarComponent implements OnInit, OnDestroy
     constructor(
         private bodyEl: AppComponent,
         private fuseMatchMedia: FuseMatchMedia,
-        private navBarService: NavbarService
+        private navBarService: FuseNavbarService
     )
     {
         navBarService.setNavBar(this);

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

@@ -1,7 +1,7 @@
-import {EventEmitter, Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
-export class NavbarService
+export class FuseNavbarService
 {
     navBarRef;
 

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

@@ -1,19 +1,14 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector   : 'fuse-toolbar',
     templateUrl: './toolbar.component.html',
     styleUrls  : ['./toolbar.component.scss']
 })
-export class ToolbarComponent implements OnInit
-{
-    @Input() sidenav;
 
+export class FuseToolbarComponent
+{
     constructor()
     {
     }
-
-    ngOnInit()
-    {
-    }
 }

src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts

@@ -1,7 +1,7 @@
-import {Component, HostBinding, Input, OnInit} from '@angular/core';
-import {NavigationService} from '../navigation.service';
-import {NavigationEnd, Router} from '@angular/router';
-import {Animations} from '../../../animations';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { FuseNavigationService } from '../navigation.service';
+import { NavigationEnd, Router } from '@angular/router';
+import { Animations } from '../../../animations';
 
 @Component({
     selector   : 'fuse-nav-collapse',
@@ -9,13 +9,13 @@ import {Animations} from '../../../animations';
     styleUrls  : ['./nav-collapse.component.scss'],
     animations : [Animations.slideInOut]
 })
-export class NavCollapseComponent implements OnInit
+export class FuseNavCollapseComponent implements OnInit
 {
     @Input() item: any;
     @HostBinding('class') classes = 'nav-collapse nav-item';
     @HostBinding('class.open') public isOpen = false;
 
-    constructor(private navigationService: NavigationService, private router: Router)
+    constructor(private navigationService: FuseNavigationService, private router: Router)
     {
         /**
          * When navigation changed
@@ -120,7 +120,7 @@ export class NavCollapseComponent implements OnInit
         {
             if ( arr.children[i].children )
             {
-                return this.isUrlInChildren(arr.children[i], url)
+                return this.isUrlInChildren(arr.children[i], url);
             }
             else
             {

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

@@ -5,7 +5,7 @@ import {Component, HostBinding, Input, OnInit} from '@angular/core';
     templateUrl: './nav-item.component.html',
     styleUrls  : ['./nav-item.component.scss']
 })
-export class NavItemComponent implements OnInit
+export class FuseNavItemComponent implements OnInit
 {
     @HostBinding('class') classes = 'nav-item';
     @Input() item: any;

src/app/core/components/navigation/nav-subheader/nav-subheader.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NavSubheaderComponent } from './nav-subheader.component';
-
-describe('NavSubheaderComponent', () => {
-  let component: NavSubheaderComponent;
-  let fixture: ComponentFixture<NavSubheaderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NavSubheaderComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavSubheaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -5,7 +5,7 @@ import {Component, HostBinding, Input, OnInit} from '@angular/core';
     templateUrl: './nav-subheader.component.html',
     styleUrls  : ['./nav-subheader.component.scss']
 })
-export class NavSubheaderComponent implements OnInit
+export class FuseNavSubheaderComponent implements OnInit
 {
     @HostBinding('class') classes = 'nav-subheader';
     @Input() item: any;

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

@@ -1,23 +1,19 @@
-import {Component, EventEmitter, OnInit, ViewEncapsulation} from '@angular/core';
-import {NavigationService} from './navigation.service';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { FuseNavigationService } from './navigation.service';
 
 @Component({
     selector     : 'fuse-navigation',
     templateUrl  : './navigation.component.html',
     styleUrls    : ['./navigation.component.scss'],
-    encapsulation: ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None
 })
-export class NavigationComponent implements OnInit
+export class FuseNavigationComponent
 {
     navigation: object[];
 
-    constructor(private navigationService: NavigationService)
+    constructor(private navigationService: FuseNavigationService)
     {
         this.navigation = navigationService.getNavigation();
     }
 
-    ngOnInit()
-    {
-    }
-
 }

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

@@ -286,17 +286,32 @@ export class FuseNavigation
                             {
                                 'title': 'Full Width',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/carded/full-width'
+                                'url'  : '/ui/page-layouts/carded/full-width'
                             },
                             {
-                                'title': 'Left Sidebar',
+                                'title': 'Full Width 2',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/carded/left-sidebar'
+                                'url'  : '/ui/page-layouts/carded/full-width-2'
                             },
                             {
-                                'title': 'Right Sidebar',
+                                'title': 'Left Sidenav',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/carded/right-sidebar'
+                                'url'  : '/ui/page-layouts/carded/left-sidenav'
+                            },
+                            {
+                                'title': 'Left Sidenav 2',
+                                'type' : 'nav-item',
+                                'url'  : '/ui/page-layouts/carded/left-sidenav-2'
+                            },
+                            {
+                                'title': 'Right Sidenav',
+                                'type' : 'nav-item',
+                                'url'  : '/ui/page-layouts/carded/right-sidenav'
+                            },
+                            {
+                                'title': 'Right Sidenav',
+                                'type' : 'nav-item',
+                                'url'  : '/ui/page-layouts/carded/right-sidenav-2'
                             }
                         ]
                     },
@@ -307,49 +322,49 @@ export class FuseNavigation
                             {
                                 'title': 'Full Width',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/full-width'
+                                'url'  : '/ui/page-layouts/simple/full-width'
                             },
                             {
                                 'title': 'Left Sidebar',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/left-sidebar'
+                                'url'  : '/ui/page-layouts/simple/left-sidebar'
                             },
                             {
                                 'title': 'Left Sidebar Inner',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/left-sidebar-inner'
+                                'url'  : '/ui/page-layouts/simple/left-sidebar-inner'
                             },
                             {
                                 'title': 'Left Sidebar Floating',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/left-sidebar-floating'
+                                'url'  : '/ui/page-layouts/simple/left-sidebar-floating'
                             },
                             {
                                 'title': 'Right Sidebar',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/right-sidebar'
+                                'url'  : '/ui/page-layouts/simple/right-sidebar'
                             },
                             {
                                 'title': 'Right Sidebar Inner',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/sidebar-inner'
+                                'url'  : '/ui/page-layouts/simple/sidebar-inner'
                             },
                             {
                                 'title': 'Right Sidebar Floating',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/right-sidebar-floating'
+                                'url'  : '/ui/page-layouts/simple/right-sidebar-floating'
                             },
                             {
                                 'title': 'Tabbed',
                                 'type' : 'nav-item',
-                                'url'  : '/user-interface/page-layouts/simple/tabbed'
+                                'url'  : '/ui/page-layouts/simple/tabbed'
                             }
                         ]
                     },
                     {
                         'title': 'Blank',
                         'type' : 'nav-item',
-                        'url'  : '/user-interface/page-layouts/blank'
+                        'url'  : '/ui/page-layouts/blank'
                     }
                 ]
             },

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

@@ -1,11 +1,10 @@
 import {NgModule} from '@angular/core';
 import {SharedModule} from '../../modules/shared.module';
 import {RouterModule, Routes} from '@angular/router';
-import {NavSubheaderComponent} from './nav-subheader/nav-subheader.component';
-import {NavigationComponent} from './navigation.component';
-import {NavItemComponent} from './nav-item/nav-item.component';
-import {NavCollapseComponent} from './nav-collapse/nav-collapse.component';
-
+import {FuseNavSubheaderComponent} from './nav-subheader/nav-subheader.component';
+import {FuseNavigationComponent} from './navigation.component';
+import {FuseNavItemComponent} from './nav-item/nav-item.component';
+import {FuseNavCollapseComponent} from './nav-collapse/nav-collapse.component';
 
 @NgModule({
     imports     : [
@@ -13,15 +12,15 @@ import {NavCollapseComponent} from './nav-collapse/nav-collapse.component';
         RouterModule
     ],
     exports     : [
-        NavigationComponent
+        FuseNavigationComponent
     ],
     declarations: [
-        NavigationComponent,
-        NavSubheaderComponent,
-        NavItemComponent,
-        NavCollapseComponent
+        FuseNavigationComponent,
+        FuseNavSubheaderComponent,
+        FuseNavItemComponent,
+        FuseNavCollapseComponent
     ],
 })
-export class NavigationModule
+export class FuseNavigationModule
 {
 }

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

@@ -2,7 +2,7 @@ import {EventEmitter, Injectable} from '@angular/core';
 import {FuseNavigation} from './navigation.model';
 
 @Injectable()
-export class NavigationService
+export class FuseNavigationService
 {
     onNavCollapseToggled = new EventEmitter<any>();
     navigation: object[];

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

@@ -1,6 +1,8 @@
-import { Directive, Input, OnInit, HostListener, ElementRef } from '@angular/core';
+import { Directive, Input, OnInit, HostListener, ElementRef, AfterViewInit, HostBinding } 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';
 
 @Directive({
     selector: '[fuseMdSidenavHelper]'
@@ -8,18 +10,52 @@ import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helpe
 export class FuseMdSidenavHelperDirective implements OnInit
 {
     @Input('fuseMdSidenavHelper') mdSidenavInstance: MdSidenav;
+    @Input('md-is-locked-open') mdIsLockedOpen: string;
 
     constructor(
         private fuseMdSidenavService: FuseMdSidenavHelperService,
-        private elRef: ElementRef
+        private elRef: ElementRef,
+        private fuseMatchMedia: FuseMatchMedia,
+        private observableMedia: ObservableMedia
     )
     {
-
     }
 
     ngOnInit()
     {
         this.fuseMdSidenavService.setSidenav(this.elRef.nativeElement.id, this.mdSidenavInstance);
+
+        console.warn(this.mdIsLockedOpen);
+
+        if ( this.observableMedia.isActive(this.mdIsLockedOpen) )
+        {
+            this.mdSidenavInstance.open();
+            this.mdSidenavInstance.mode = 'side';
+        }
+        else
+        {
+            this.mdSidenavInstance.close();
+            this.mdSidenavInstance.mode = 'over';
+        }
+
+        this.fuseMatchMedia.onMediaChange.subscribe((change) =>
+        {
+            console.log(this.observableMedia.isActive(this.mdIsLockedOpen));
+
+            if ( this.observableMedia.isActive(this.mdIsLockedOpen) )
+            {
+                this.mdSidenavInstance.open();
+                this.mdSidenavInstance.mode = 'side';
+            }
+            else
+            {
+                this.mdSidenavInstance.close();
+                this.mdSidenavInstance.mode = 'over';
+            }
+        });
+
+        console.warn(this.mdIsLockedOpen);
+
     }
 }
 

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

@@ -1,23 +1,31 @@
-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 { 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';
 
 @NgModule({
-    imports: [
+    declarations: [
+        FuseMdSidenavHelperDirective,
+        FuseMdSidenavTogglerDirective
+    ],
+    imports     : [
         FlexLayoutModule,
         MaterialModule,
         CommonModule,
         FormsModule
     ],
-    exports: [
+    exports     : [
         FlexLayoutModule,
         MaterialModule,
         CommonModule,
-        FormsModule
-    ],
+        FormsModule,
+        FuseMdSidenavHelperDirective,
+        FuseMdSidenavTogglerDirective
+    ]
 })
+
 export class SharedModule
 {
 

src/app/core/scss/core.scss

@@ -19,4 +19,7 @@
 @include angular-material-typography($custom-typography);
 
 // Partials
-
+@import "partials/global";
+@import "partials/angular-material-fix";
+@import "partials/typography";
+@import "partials/page-layouts";

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

@@ -0,0 +1,13 @@
+.mat-body {
+
+    p {
+        margin: 0;
+    }
+}
+
+.mat-icon-button {
+
+    .mat-button-ripple {
+        border-radius: 50%;
+    }
+}

src/app/core/scss/partials/_global.scss

@@ -0,0 +1,24 @@
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+
+    &.fuse-nav-bar-folded {
+
+        .content-wrapper {
+            padding-left: 64px;
+        }
+    }
+
+    > md-sidenav-container {
+        height: 100%;
+    }
+}

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

@@ -0,0 +1,339 @@
+// Page Layouts
+$header-height: 200px;
+$header-height-sm: 160px;
+
+$card-toolbar-height: 64px;
+$card-header-height: $header-height - $card-toolbar-height;
+$card-header-height-sm: $header-height-sm - $card-toolbar-height;
+
+.page-layout {
+    position: relative;
+    overflow: hidden;
+
+    // Top bg
+    .top-bg {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        right: 0;
+        left: 0;
+        height: $header-height;
+        background-color: mat-color($mat-blue, 500);
+    }
+
+    // Carded layout
+    &.carded {
+        display: flex;
+        flex-direction: row;
+        min-height: 100%;
+        height: 100%;
+
+        // Fullwidth
+        &.fullwidth {
+
+            // Single scroll
+            &.single-scroll {
+                height: auto;
+
+                > .center {
+
+                    .content-card {
+
+                        .content {
+                            overflow: hidden;
+                        }
+                    }
+                }
+            }
+
+            // Center
+            > .center {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                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 {
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1;
+                    background: #FFFFFF;
+                    overflow: hidden;
+                    @include mat-elevation(7);
+
+                    .toolbar {
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                        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);
+                    }
+
+                    .content {
+                        display: flex;
+                        flex: 1;
+                        padding: 24px;
+                        background: #FFFFFF;
+                        overflow: auto;
+                    }
+                }
+            }
+        }
+
+        // Left sidenav
+        &.left-sidenav {
+
+            // Single scroll
+            &.single-scroll {
+                height: auto;
+
+                > .center {
+
+                    .content-card {
+
+                        .content {
+                            overflow: hidden;
+                        }
+                    }
+                }
+            }
+
+            // Sidenav
+            > md-sidenav-container {
+                background: none;
+                z-index: 2;
+
+                .sidenav {
+                    display: flex;
+                    flex-direction: column;
+                    width: 240px;
+                    min-width: 240px;
+                    max-width: 240px;
+                    z-index: 2;
+                    overflow-y: hidden;
+                    @include mat-elevation(7);
+
+                    .header {
+                        height: $header-height;
+                        min-height: $header-height;
+                        max-height: $header-height;
+                        padding: 24px;
+                    }
+
+                    .content {
+                        background: transparent;
+                        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 {
+                    overflow: visible;
+
+                    // Center
+                    .center {
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1;
+                        position: relative;
+                        z-index: 3;
+                        height: 100%;
+                        margin-left: 32px;
+                        margin-right: 32px;
+
+                        @include media-breakpoint('gt-md') {
+                            margin-left: 0;
+                        }
+
+                        .header {
+                            display: flex;
+                            height: $card-header-height;
+                            min-height: $card-header-height;
+                            max-height: $card-header-height;
+                            padding: 24px;
+                        }
+
+                        .content-card {
+                            display: flex;
+                            flex-direction: column;
+                            flex: 1;
+                            background: #FFFFFF;
+                            overflow: hidden;
+                            @include mat-elevation(7);
+
+                            .toolbar {
+                                display: flex;
+                                justify-content: flex-start;
+                                align-items: center;
+                                flex: 1;
+                                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 8px 0 0 !important;
+                                    padding: 0 !important;
+                                    border-radius: 0;
+                                }
+                            }
+
+                            .content {
+                                display: flex;
+                                flex: 1;
+                                padding: 24px;
+                                background: #FFFFFF;
+                                overflow: auto;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        // 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);
+
+                .header {
+                    height: $header-height;
+                    min-height: $header-height;
+                    max-height: $header-height;
+                    padding: 24px 24px 24px 0;
+                }
+
+                .content {
+                    background: transparent;
+                    padding: 24px 24px 24px 0;
+                }
+
+                &.md-locked-open {
+                    width: 196px;
+                    min-width: 196px;
+                    max-width: 196px;
+                    z-index: 2;
+                    background: transparent;
+                    box-shadow: none;
+                }
+
+                &: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;
+                        }
+                    }
+
+                    .content {
+                        padding: 24px;
+                        background: #FFFFFF;
+                    }
+                }
+            }
+        }
+    }
+}

src/app/core/services/layout.service.ts

@@ -2,7 +2,7 @@ import { EventEmitter, Injectable } from '@angular/core';
 import { NavigationStart, Router } from '@angular/router';
 
 @Injectable()
-export class LayoutService
+export class FuseLayoutService
 {
     defaultSettings: { navigation: string, toolbar: string, footer: string };
     settings: { navigation: string, toolbar: string, footer: string };
@@ -17,8 +17,8 @@ export class LayoutService
         // Set the default settings
         this.defaultSettings = {
             navigation: 'left', // 'right', 'left', 'top', none
-            toolbar   : 'above', // 'above', 'below', none
-            footer    : 'above' // 'above', 'below', none
+            toolbar   : 'below', // 'above', 'below', none
+            footer    : 'none' // 'above', 'below', none
         };
 
         // Assign default settings at the init
@@ -38,7 +38,7 @@ export class LayoutService
     }
 
     /**
-     * Get Settings
+     * Gets settings
      * @returns {{navigation: string, toolbar: string, footer: string}}
      */
     getSettings()
@@ -47,7 +47,7 @@ export class LayoutService
     }
 
     /**
-     * Set Settings
+     * Sets settings
      * @param newSettings
      */
     setSettings(newSettings)
@@ -55,4 +55,15 @@ export class LayoutService
         Object.assign(this.settings, newSettings);
         this.onSettingsChanged.emit(this.settings);
     }
+
+    /**
+     * Sets default settings
+     * @param newDefaultSettings
+     */
+    setDefaultSettings(newDefaultSettings)
+    {
+        Object.assign(this.defaultSettings, newDefaultSettings);
+
+        // this.onSettingsChanged.emit(this.settings);
+    }
 }

src/app/core/services/match-media.service.ts

@@ -1,19 +1,20 @@
 import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
-import { Injectable } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
 
 @Injectable()
 export class FuseMatchMedia
 {
     activeMediaQuery: string;
-    onMediaChange: Observable<string>;
+    // onMediaChange: Observable<string>;
+    onMediaChange: EventEmitter<string> = new EventEmitter<string>();
 
     constructor(private observableMedia: ObservableMedia)
     {
         this.activeMediaQuery = '';
 
-        this.onMediaChange = Observable.create((observer: Observer<string>) =>
+        /*this.onMediaChange = Observable.create((observer: Observer<string>) =>
         {
             this.observableMedia.subscribe((change: MediaChange) =>
             {
@@ -23,6 +24,20 @@ export class FuseMatchMedia
                     observer.next(this.activeMediaQuery);
                 }
             });
+        });*/
+
+        /*this.onMediaChange = Observable.create((observer: Observer<string>) =>
+        {
+
+        });*/
+
+        this.observableMedia.subscribe((change: MediaChange) =>
+        {
+            if ( this.activeMediaQuery !== change.mqAlias )
+            {
+                this.activeMediaQuery = change.mqAlias;
+                this.onMediaChange.emit(change.mqAlias);
+            }
         });
     }
 }

src/app/main/apps/dashboards/project/project.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { LayoutService } from '../../../../core/services/layout.service';
+import { FuseLayoutService } from '../../../../core/services/layout.service';
 
 @Component({
     selector   : 'fuse-project',
@@ -10,7 +10,7 @@ export class ProjectComponent implements OnInit
 {
     layoutSettings: any;
 
-    constructor(private layoutService: LayoutService)
+    constructor(private layoutService: FuseLayoutService)
     {
         /*this.layoutService.setSettings({
             navigation: 'left',

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { LayoutService } from '../../../core/services/layout.service';
+import { FuseLayoutService } from '../../../core/services/layout.service';
 
 @Component({
     selector   : 'fuse-mail',
@@ -9,7 +9,7 @@ import { LayoutService } from '../../../core/services/layout.service';
 export class MailComponent implements OnInit
 {
 
-    constructor(private layoutService: LayoutService)
+    constructor(private layoutService: FuseLayoutService)
     {
         this.layoutService.setSettings({
             navigation: 'left',

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

@@ -7,7 +7,7 @@ import { ClassicViewComponent } from './views/classic/classic-view.component';
 
 const routes: Routes = [
     {
-        path     : 'apps/mail',
+        path     : '',
         component: MailComponent,
         children : [
             {

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

@@ -0,0 +1,39 @@
+<div class="page-layout carded fullwidth single-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header">
+            <h2>Fullwidth with page scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card">
+
+            <!-- CONTENT TOOLBAR -->
+            <div class="toolbar">
+                <span>Content toolbar</span>
+            </div>
+            <!-- / CONTENT TOOLBAR -->
+
+            <!-- CONTENT -->
+            <div class="content">
+
+                <fuse-demo-content></fuse-demo-content>
+
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.ts

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

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

@@ -1,3 +1,39 @@
-<p>
-  FullWidth works!
-</p>
+<div class="page-layout carded fullwidth">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header">
+            <h2>Fullwidth with content scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card">
+
+            <!-- CONTENT TOOLBAR -->
+            <div class="toolbar">
+                <span>Content toolbar</span>
+            </div>
+            <!-- / CONTENT TOOLBAR -->
+
+            <!-- CONTENT -->
+            <div class="content">
+
+                <fuse-demo-content></fuse-demo-content>
+
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

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

@@ -1,19 +1,13 @@
-import {Component, OnInit} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-chat',
+    selector   : 'fuse-carded-fullwidth',
     templateUrl: './fullwidth.component.html',
     styleUrls  : ['./fullwidth.component.scss']
 })
-export class CardedFullWidthComponent implements OnInit
+export class CardedFullWidthComponent
 {
-
     constructor()
     {
     }
-
-    ngOnInit()
-    {
-    }
-
 }

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

@@ -1,23 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {CardedFullWidthComponent} from './fullwidth.component';
-import {SharedModule} from '../../../../../core/modules/shared.module';
-
-const routes: Routes = [
-    {
-        path: 'user-interface/page-layouts/carded/full-width', component: CardedFullWidthComponent, children: []
-    }
-]
-
-@NgModule({
-    imports     : [
-        SharedModule,
-        RouterModule.forChild(routes)
-    ],
-    declarations: [
-        CardedFullWidthComponent
-    ]
-})
-export class CardedFullWidthModule
-{
-}

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

@@ -0,0 +1,67 @@
+<div class="page-layout carded left-sidenav">
+
+    <!-- TOP BACKGROUND -->
+    <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 HEADER -->
+            <div class="header">
+                <p>Sidenav header</p>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content">
+                <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 content scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button" [fuseMdSidenavToggler]="'carded-left-sidenav'"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <p>Content toolbar</p>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content">
+
+                    <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/left-sidenav.component.ts

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

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

@@ -0,0 +1,41 @@
+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 { CardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component';
+
+const routes: Routes = [
+    {
+        path     : 'ui/page-layouts/carded/full-width',
+        component: CardedFullWidthComponent,
+        children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/full-width-2',
+        component: CardedFullWidth2Component,
+        children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/left-sidenav',
+        component: CardedLeftSidenavComponent,
+        children : []
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes),
+        FuseDemoModule
+    ],
+    declarations: [
+        CardedFullWidthComponent,
+        CardedFullWidth2Component,
+        CardedLeftSidenavComponent
+    ]
+})
+export class UIPageLayoutsModule
+{
+}

src/styles.scss

@@ -1,23 +1,2 @@
 // Import Fuse main library
 @import "app/core/scss/core";
-
-html, body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
-body {
-
-    &.fuse-nav-bar-folded {
-
-        .content-wrapper {
-            padding-left: 64px;
-        }
-    }
-
-    > md-sidenav-container {
-        height: 100%;
-    }
-}