simple layout 3 perfect scrollbar

+ simple layout 3 tweaks
+ added modules to all pages
+ moved some stuff to the SharedModule from AppModule
+ typography page structure

src/app/app.module.ts

@@ -1,22 +1,19 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
 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 { ProjectModule } from './main/content/apps/dashboards/project/project.module';
-import { FuseLayoutService } from './core/services/layout.service';
-import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { FuseMatchMedia } from './core/services/match-media.service';
-import { FuseNavbarService } from './main/navbar/navbar.service';
-import { SharedModule } from './core/modules/shared.module';
-import { FuseMdSidenavHelperService } from './core/directives/md-sidenav-helper/md-sidenav-helper.service';
-import { FuseMainModule } from './main/main.module';
-import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { HttpModule } from '@angular/http';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+
+import 'hammerjs';
+
+import { SharedModule } from './core/modules/shared.module';
+import { AppComponent } from './app.component';
+import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
+import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
+import { FuseMainModule } from './main/main.module';
 import { PagesModule } from './main/content/pages/pages.module';
 import { UIModule } from './main/content/ui/ui.module';
 import { ComponentsModule } from './main/content/components/components.module';
@@ -28,27 +25,27 @@ const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
 const appRoutes: Routes = [
     {
         path        : 'apps/mail',
-        loadChildren: './main/apps/mail/mail.module#FuseMailModule'
+        loadChildren: './main/content/apps/mail/mail.module#FuseMailModule'
     },
     {
         path        : 'apps/chat',
-        loadChildren: './main/apps/chat/chat.module#FuseChatModule'
+        loadChildren: './main/content/apps/chat/chat.module#FuseChatModule'
     },
     {
         path        : 'apps/calendar',
-        loadChildren: './main/apps/calendar/calendar.module#FuseCalendarModule'
+        loadChildren: './main/content/apps/calendar/calendar.module#FuseCalendarModule'
     },
     {
         path        : 'apps/todo',
-        loadChildren: './main/apps/todo/todo.module#FuseTodoModule'
+        loadChildren: './main/content/apps/todo/todo.module#FuseTodoModule'
     },
     {
         path        : 'apps/file-manager',
-        loadChildren: './main/apps/file-manager/file-manager.module#FuseFileManagerModule'
+        loadChildren: './main/content/apps/file-manager/file-manager.module#FuseFileManagerModule'
     },
     {
         path        : 'apps/contacts',
-        loadChildren: './main/apps/contacts/contacts.module#FuseContactsModule'
+        loadChildren: './main/content/apps/contacts/contacts.module#FuseContactsModule'
     },
     {
         path      : '**',
@@ -65,8 +62,8 @@ const appRoutes: Routes = [
         HttpModule,
         HttpClientModule,
         BrowserAnimationsModule,
-        SharedModule,
         RouterModule.forRoot(appRoutes),
+        SharedModule,
 
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
 
@@ -80,14 +77,9 @@ const appRoutes: Routes = [
         UIModule,
         ComponentsModule
     ],
-    providers   : [
-        FuseNavigationService,
-        FuseLayoutService,
-        FuseMatchMedia,
-        FuseNavbarService,
-        FuseMdSidenavHelperService
-    ],
-    bootstrap   : [AppComponent]
+    bootstrap   : [
+        AppComponent
+    ]
 })
 export class AppModule
 {

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

@@ -170,7 +170,7 @@ export class FuseNavigation
                 'title': 'USER INTERFACE',
                 'type' : 'subheader'
             },
-            {
+            /*{
                 'title'   : 'Elements',
                 'type'    : 'nav-collapse',
                 'icon'    : 'layers',
@@ -251,6 +251,12 @@ export class FuseNavigation
                         'url'  : '/ui/elements/progress'
                     }
                 ]
+            },*/
+            {
+                'title': 'Typography',
+                'type' : 'nav-item',
+                'icon' : 'text_fields',
+                'url'  : '/ui/typography'
             },
             {
                 'title'   : 'Page Layouts',

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

@@ -4,20 +4,21 @@ import { CommonModule } from '@angular/common';
 
 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
-
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-
-import {
-    FuseMdSidenavHelperDirective,
-    FuseMdSidenavTogglerDirective
-} from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
-import { FusePipesModule } from '../pipes/pipes.module';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
-import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
+import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import { FusePipesModule } from '../pipes/pipes.module';
+import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
+import { FuseCountdownComponent } from '../components/countdown/countdown.component';
+import { FuseNavigationService } from '../components/navigation/navigation.service';
+import { FuseLayoutService } from '../services/layout.service';
+import { FuseMatchMedia } from '../services/match-media.service';
+import { FuseNavbarService } from '../../main/navbar/navbar.service';
+import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
+
 @NgModule({
     declarations   : [
         FuseMdSidenavHelperDirective,
@@ -54,6 +55,13 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
     ],
     entryComponents: [
         FuseConfirmDialogComponent
+    ],
+    providers      : [
+        FuseNavigationService,
+        FuseLayoutService,
+        FuseMatchMedia,
+        FuseNavbarService,
+        FuseMdSidenavHelperService
     ]
 })
 

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

@@ -314,6 +314,10 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         &.md-is-locked-open {
                             height: auto;
                         }
+
+                        .sidenav-content {
+                            height: 100%;
+                        }
                     }
 
                     .mat-sidenav-content {
@@ -321,10 +325,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         height: auto;
 
                         .center {
+                            flex: 1;
+                            min-height: 100%;
                             @include mat-elevation(0);
 
                             .content {
-                                @include mat-elevation(4);
+                                display: flex;
+                                flex: 1;
+                                min-height: 100%;
                             }
                         }
                     }

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

@@ -44,7 +44,7 @@ export class FuseLayoutService
      */
     setSettings(settings)
     {
-        const newSettings = Object.assign({}, this.defaultSettings, settings);
-        this.onSettingsChanged.next(newSettings);
+        // const newSettings = Object.assign({}, this.defaultSettings, settings);
+        // this.onSettingsChanged.next(newSettings);
     }
 }

src/app/main/content/content.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { NavigationEnd, Router } from '@angular/router';
 

src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/forgot-password',
+        component: ForgotPasswordComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        ForgotPasswordComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class ForgotPasswordModule
+{
+
+}

src/app/main/content/pages/authentication/lock/lock.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { LockComponent } from './lock.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/lock',
+        component: LockComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        LockComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class LockModule
+{
+
+}

src/app/main/content/pages/authentication/login-2/login-2.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { Login2Component } from './login-2.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/login-2',
+        component: Login2Component
+    }
+];
+
+@NgModule({
+    declarations: [
+        Login2Component
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class Login2Module
+{
+
+}

src/app/main/content/pages/authentication/login/login.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { LoginComponent } from './login.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/login',
+        component: LoginComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        LoginComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class LoginModule
+{
+
+}

src/app/main/content/pages/authentication/register-2/register-2.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from "app/core/modules/shared.module";
+import { RouterModule } from '@angular/router';
+
+import { Register2Component } from './register-2.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/register-2',
+        component: Register2Component
+    }
+];
+
+@NgModule({
+    declarations: [
+        Register2Component
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class Register2Module
+{
+
+}

src/app/main/content/pages/authentication/register/register.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { RegisterComponent } from './register.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/register',
+        component: RegisterComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        RegisterComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class RegisterModule
+{
+
+}

src/app/main/content/pages/authentication/reset-password/reset-password.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { ResetPasswordComponent } from './reset-password.component';
+
+const routes = [
+    {
+        path     : 'pages/auth/reset-password',
+        component: ResetPasswordComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        ResetPasswordComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class ResetPasswordModule
+{
+
+}

src/app/main/content/pages/coming-soon/coming-soon.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { ComingSoonComponent } from './coming-soon.component';
+
+const routes = [
+    {
+        path     : 'pages/coming-soon',
+        component: ComingSoonComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        ComingSoonComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class ComingSoonModule
+{
+
+}

src/app/main/content/pages/errors/404/error-404.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { Error404Component } from './error-404.component';
+
+const routes = [
+    {
+        path     : 'pages/errors/error-404',
+        component: Error404Component
+    }
+];
+
+@NgModule({
+    declarations: [
+        Error404Component
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class Error404Module
+{
+
+}

src/app/main/content/pages/errors/500/error-500.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { Error500Component } from './error-500.component';
+
+const routes = [
+    {
+        path     : 'pages/errors/error-500',
+        component: Error500Component
+    }
+];
+
+@NgModule({
+    declarations: [
+        Error500Component
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class Error500Module
+{
+
+}

src/app/main/content/pages/invoices/compact/compact.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { InvoiceCompactComponent } from './compact.component';
+import { InvoiceService } from '../invoice.service';
+
+const routes = [
+    {
+        path     : 'pages/invoices/compact',
+        component: InvoiceCompactComponent,
+        resolve  : {
+            search: InvoiceService
+        }
+    }
+];
+
+@NgModule({
+    declarations: [
+        InvoiceCompactComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    providers   : [
+        InvoiceService
+    ]
+})
+
+export class InvoiceCompactModule
+{
+
+}

src/app/main/content/pages/invoices/modern/modern.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { InvoiceModernComponent } from './modern.component';
+import { InvoiceService } from '../invoice.service';
+
+const routes = [
+    {
+        path     : 'pages/invoices/modern',
+        component: InvoiceModernComponent,
+        resolve  : {
+            search: InvoiceService
+        }
+    }
+];
+
+@NgModule({
+    declarations: [
+        InvoiceModernComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    providers   : [
+        InvoiceService
+    ]
+})
+
+export class InvoiceModernModule
+{
+
+}

src/app/main/content/pages/maintenance/maintenence.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+
+import { MaintenanceComponent } from './maintenance.component';
+
+const routes = [
+    {
+        path     : 'pages/maintenance',
+        component: MaintenanceComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        MaintenanceComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class MaintenanceModule
+{
+
+}

src/app/main/content/pages/pages.module.ts

@@ -1,129 +1,51 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../core/modules/shared.module';
-import { RouterModule } from '@angular/router';
 
-import { LoginComponent } from './authentication/login/login.component';
-import { Login2Component } from './authentication/login-2/login-2.component';
-import { RegisterComponent } from './authentication/register/register.component';
-import { Register2Component } from './authentication/register-2/register-2.component';
-import { ForgotPasswordComponent } from './authentication/forgot-password/forgot-password.component';
-import { ResetPasswordComponent } from './authentication/reset-password/reset-password.component';
-import { LockComponent } from './authentication/lock/lock.component';
-import { ComingSoonComponent } from './coming-soon/coming-soon.component';
-import { Error404Component } from './errors/404/error-404.component';
-import { Error500Component } from './errors/500/error-500.component';
-import { InvoiceModernComponent } from './invoices/modern/modern.component';
-import { InvoiceCompactComponent } from './invoices/compact/compact.component';
-import { InvoiceService } from './invoices/invoice.service';
-import { MaintenanceComponent } from './maintenance/maintenance.component';
+import { LoginModule } from './authentication/login/login.module';
+import { Login2Module } from './authentication/login-2/login-2.module';
+import { RegisterModule } from './authentication/register/register.module';
+import { Register2Module } from './authentication/register-2/register-2.module';
+import { ForgotPasswordModule } from './authentication/forgot-password/forgot-password.module';
+import { LockModule } from './authentication/lock/lock.module';
+import { ResetPasswordModule } from './authentication/reset-password/reset-password.module';
+import { ComingSoonModule } from './coming-soon/coming-soon.module';
+import { Error404Module } from './errors/404/error-404.module';
+import { Error500Module } from './errors/500/error-500.module';
+import { InvoiceCompactModule } from './invoices/compact/compact.module';
+import { InvoiceModernModule } from './invoices/modern/modern.module';
+import { MaintenanceModule } from './maintenance/maintenence.module';
 import { ProfileModule } from './profile/profile.module';
-import { ProfileComponent } from './profile/profile.component';
-import { ProfileService } from './profile/profile.service';
 import { SearchModule } from './search/search.module';
-import { SearchComponent } from './search/search.component';
-import { SearchService } from './search/search.service';
-
-const routes = [
-    {
-        path     : 'pages/auth/login',
-        component: LoginComponent
-    },
-    {
-        path     : 'pages/auth/login-2',
-        component: Login2Component
-    },
-    {
-        path     : 'pages/auth/register',
-        component: RegisterComponent
-    },
-    {
-        path     : 'pages/auth/register-2',
-        component: Register2Component
-    },
-    {
-        path     : 'pages/auth/forgot-password',
-        component: ForgotPasswordComponent
-    },
-    {
-        path     : 'pages/auth/reset-password',
-        component: ResetPasswordComponent
-    },
-    {
-        path     : 'pages/auth/lock',
-        component: LockComponent
-    },
-    {
-        path     : 'pages/coming-soon',
-        component: ComingSoonComponent
-    },
-    {
-        path     : 'pages/errors/error-404',
-        component: Error404Component
-    },
-    {
-        path     : 'pages/errors/error-500',
-        component: Error500Component
-    },
-    {
-        path     : 'pages/invoices/compact',
-        component: InvoiceCompactComponent,
-        resolve  : {
-            invoice: InvoiceService
-        }
-    },
-    {
-        path     : 'pages/invoices/modern',
-        component: InvoiceModernComponent,
-        resolve  : {
-            invoice: InvoiceService
-        }
-    },
-    {
-        path     : 'pages/maintenance',
-        component: MaintenanceComponent
-    },
-    {
-        path     : 'pages/profile',
-        component: ProfileComponent,
-        resolve  : {
-            profile: ProfileService
-        }
-    },
-    {
-        path     : 'pages/search',
-        component: SearchComponent,
-        resolve  : {
-            search: SearchService
-        }
-    }
-];
 
 @NgModule({
-    imports     : [
-        SharedModule,
-        RouterModule.forChild(routes),
+    imports  : [
+        // Auth
+        LoginModule,
+        Login2Module,
+        RegisterModule,
+        Register2Module,
+        ForgotPasswordModule,
+        ResetPasswordModule,
+        LockModule,
+
+        // Coming-soon
+        ComingSoonModule,
+
+        // Errors
+        Error404Module,
+        Error500Module,
+
+        // Invoices
+        InvoiceModernModule,
+        InvoiceCompactModule,
+
+        // Maintenance
+        MaintenanceModule,
+
+        // Profile
         ProfileModule,
+
+        // Search
         SearchModule
-    ],
-    declarations: [
-        LoginComponent,
-        Login2Component,
-        RegisterComponent,
-        Register2Component,
-        ForgotPasswordComponent,
-        ResetPasswordComponent,
-        LockComponent,
-        ComingSoonComponent,
-        Error404Component,
-        Error500Component,
-        InvoiceCompactComponent,
-        InvoiceModernComponent,
-        MaintenanceComponent
-    ],
-    providers   : [
-        InvoiceService,
-        ProfileService,
-        SearchService
     ]
 })
 export class PagesModule

src/app/main/content/pages/profile/profile.module.ts

@@ -1,26 +1,36 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
 
 import { ProfileComponent } from './profile.component';
 import { ProfileTimelineComponent } from './tabs/timeline/timeline.component';
 import { ProfileAboutComponent } from './tabs/about/about.component';
 import { ProfilePhotosVideosComponent } from './tabs/photos-videos/photos-videos.component';
+import { ProfileService } from './profile.service';
+
+const routes = [
+    {
+        path     : 'pages/profile',
+        component: ProfileComponent,
+        resolve  : {
+            profile: ProfileService
+        }
+    }
+];
 
 @NgModule({
-    imports     : [
-        SharedModule
-    ],
-    exports     : [
-        ProfileComponent,
-        ProfileTimelineComponent,
-        ProfileAboutComponent,
-        ProfilePhotosVideosComponent
-    ],
     declarations: [
         ProfileComponent,
         ProfileTimelineComponent,
         ProfileAboutComponent,
         ProfilePhotosVideosComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    providers   : [
+        ProfileService
     ]
 })
 export class ProfileModule

src/app/main/content/pages/search/search.module.ts

@@ -1,10 +1,21 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
 
 import { SearchClassicComponent } from './tabs/classic/classic.component';
 import { SearchTableComponent } from './tabs/table/table.component';
 import { SearchComponent } from './search.component';
+import { SearchService } from './search.service';
 
+const routes = [
+    {
+        path     : 'pages/search',
+        component: SearchComponent,
+        resolve  : {
+            search: SearchService
+        }
+    }
+];
 
 @NgModule({
     declarations: [
@@ -13,12 +24,11 @@ import { SearchComponent } from './search.component';
         SearchTableComponent
     ],
     imports     : [
-        SharedModule
+        SharedModule,
+        RouterModule.forChild(routes)
     ],
-    exports     : [
-        SearchComponent,
-        SearchClassicComponent,
-        SearchTableComponent
+    providers   : [
+        SearchService
     ]
 })
 export class SearchModule

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

@@ -22,16 +22,20 @@
         <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
 
-            <fuse-demo-sidenav></fuse-demo-sidenav>
+            <div class="sidenav-content" perfect-scrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
 
         </md-sidenav>
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center p-24">
+        <div class="center p-24" perfect-scrollbar>
 
             <!-- CONTENT -->
-            <div class="content p-24" perfect-scrollbar>
+            <div class="content p-24 mat-elevation-z4">
 
                 <fuse-demo-content></fuse-demo-content>
 

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

@@ -19,10 +19,10 @@
     <md-sidenav-container>
 
         <!-- CENTER -->
-        <div class="center p-24">
+        <div class="center p-24" perfect-scrollbar>
 
             <!-- CONTENT -->
-            <div class="content p-24" perfect-scrollbar>
+            <div class="content p-24 mat-elevation-z4">
 
                 <fuse-demo-content></fuse-demo-content>
 
@@ -36,7 +36,11 @@
         <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
 
-            <fuse-demo-sidenav></fuse-demo-sidenav>
+            <div class="sidenav-content" perfect-scrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
 
         </md-sidenav>
         <!-- / SIDENAV -->

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

@@ -0,0 +1 @@
+typography

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

@@ -0,0 +1,3 @@
+:host {
+
+}

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

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

src/app/main/content/ui/typography/typography.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { TypographyComponent } from './typography.component';
+
+const routes: Routes = [
+    {
+        path     : 'ui/typography',
+        component: TypographyComponent
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes),
+    ],
+    declarations: [
+        TypographyComponent
+    ]
+})
+export class UITypographyModule
+{
+}

src/app/main/content/ui/ui.module.ts

@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
+
 import { UIPageLayoutsModule } from './page-layouts/page-layouts.module';
 import { UIColorsModule } from './colors/colors.module';
-
+import { UITypographyModule } from './typography/typography.module';
 
 @NgModule({
     imports: [
         UIColorsModule,
-        UIPageLayoutsModule
+        UIPageLayoutsModule,
+        UITypographyModule
     ]
 })
 export class UIModule