From 4469a2c25a6b63b603348a7fb05a54b8fd49519a Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 23 Oct 2017 10:51:28 +0300
Subject: [PATCH 01/11] Fix: iOS10 scrolling issue in dashboard

---
 .../content/apps/dashboards/project/project.component.html   | 2 +-
 .../content/apps/dashboards/project/project.component.scss   | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html
index ed4df3b1..c395c2b6 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/src/app/main/content/apps/dashboards/project/project.component.html
@@ -3,7 +3,7 @@
     <mat-sidenav-container>
 
         <!-- CENTER -->
-        <div class="center" fxFlex fusePerfectScrollbar>
+        <div class="center" fusePerfectScrollbar>
 
             <!-- HEADER -->
             <div class="header mat-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">
diff --git a/src/app/main/content/apps/dashboards/project/project.component.scss b/src/app/main/content/apps/dashboards/project/project.component.scss
index ad0d5dda..75e7b0a1 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.scss
+++ b/src/app/main/content/apps/dashboards/project/project.component.scss
@@ -2,6 +2,11 @@
 
     mat-sidenav-container {
 
+        .mat-drawer-content,
+        .mat-sidenav-content {
+            flex: 1 1 100%;
+        }
+
         .center {
 
             > .header {

From ca8ed939aefb1f95ab549da1e7a5a0404fd2c9c9 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 23 Oct 2017 14:39:44 +0300
Subject: [PATCH 02/11] Added new tabbed versions of the carded sidenav layouts
 + Small tweaks on other carded sidenav layouts

---
 package-lock.json                             |  74 ++++-----
 package.json                                  |  22 +--
 src/app/core/scss/partials/_page-layouts.scss |  56 +++++++
 .../left-sidenav-2-tabbed.component.html      | 151 ++++++++++++++++++
 .../left-sidenav-2-tabbed.component.scss      |   0
 .../left-sidenav-2-tabbed.component.ts        |  14 ++
 .../left-sidenav-2.component.html             |   6 +-
 .../left-sidenav-tabbed.component.html        | 151 ++++++++++++++++++
 .../left-sidenav-tabbed.component.scss        |   0
 .../left-sidenav-tabbed.component.ts          |  14 ++
 .../left-sidenav/left-sidenav.component.html  |   2 +-
 .../right-sidenav-2-tabbed.component.html     | 151 ++++++++++++++++++
 .../right-sidenav-2-tabbed.component.scss     |   0
 .../right-sidenav-2-tabbed.component.ts       |  14 ++
 .../right-sidenav-2.component.html            |   4 +-
 .../right-sidenav-tabbed.component.html       | 151 ++++++++++++++++++
 .../right-sidenav-tabbed.component.scss       |   0
 .../right-sidenav-tabbed.component.ts         |  14 ++
 .../right-sidenav.component.html              |   4 +-
 .../ui/page-layouts/page-layouts.module.ts    |  24 +++
 src/app/navigation.model.ts                   |  24 +++
 21 files changed, 823 insertions(+), 53 deletions(-)
 create mode 100644 src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
 create mode 100644 src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss
 create mode 100644 src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts
 create mode 100644 src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
 create mode 100644 src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss
 create mode 100644 src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
 create mode 100644 src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
 create mode 100644 src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss
 create mode 100644 src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts
 create mode 100644 src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
 create mode 100644 src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss
 create mode 100644 src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts

diff --git a/package-lock.json b/package-lock.json
index d9effc80..8136dfed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,9 +51,9 @@
       }
     },
     "@angular/animations": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.5.tgz",
-      "integrity": "sha1-WlpVHXV+WlVgCY9vhTXBAtk5VNc=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.6.tgz",
+      "integrity": "sha1-+mYYmaik44y3xYPHpcl85l1ZKjU=",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -143,28 +143,28 @@
       }
     },
     "@angular/common": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.5.tgz",
-      "integrity": "sha1-vVF53JIq2/TD6m37Gec8uEn/3Dc=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.6.tgz",
+      "integrity": "sha1-S4FCByTggooOg5uVpV6xp+g5GPI=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/compiler": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.5.tgz",
-      "integrity": "sha1-hyGlkQ8rtS8J4tQEytJk817eWQI=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.6.tgz",
+      "integrity": "sha1-LuH68lt1fh0SiXkHS+f65SmzvCA=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/compiler-cli": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.5.tgz",
-      "integrity": "sha1-YfoDNqzRogjF8cXG1N9nnpmVMkg=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.6.tgz",
+      "integrity": "sha1-uv09HiYOmQh+uajPdTLb1gOrubE=",
       "dev": true,
       "requires": {
-        "@angular/tsc-wrapped": "4.4.5",
+        "@angular/tsc-wrapped": "4.4.6",
         "minimist": "1.2.0",
         "reflect-metadata": "0.1.10"
       },
@@ -178,9 +178,9 @@
       }
     },
     "@angular/core": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.5.tgz",
-      "integrity": "sha1-VKy8vaEXGfiDx4apBpdKvrEy8aA=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.6.tgz",
+      "integrity": "sha1-EwMf0Q3P5DiHVBmzjyESCVi8I1Q=",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -194,25 +194,25 @@
       }
     },
     "@angular/forms": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.5.tgz",
-      "integrity": "sha1-6VUghiMqqyzh0I7xmLYiBOoTxDs=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.6.tgz",
+      "integrity": "sha1-/mSs5CQ1wbgPSQNLfEHOjK8UpEo=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/http": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.5.tgz",
-      "integrity": "sha1-LHNe2EJAH8I1ZBkmjiiNzyOW6E8=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.6.tgz",
+      "integrity": "sha1-CvaAxnEL3AJtlA4iXP0PalwAXQw=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/language-service": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.5.tgz",
-      "integrity": "sha1-zO8Tm40+FoSwGvo1xvvyFy4rtnY=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.6.tgz",
+      "integrity": "sha1-SY7OlcX2BmQDv5/TxYMa9CtFYYs=",
       "dev": true
     },
     "@angular/material": {
@@ -224,33 +224,33 @@
       }
     },
     "@angular/platform-browser": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.5.tgz",
-      "integrity": "sha1-dOuRwLdYEm8m1T7lbHz0ZovZysU=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.6.tgz",
+      "integrity": "sha1-qYOcVH4bZU+h0kqJeAyLpquNzOA=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.5.tgz",
-      "integrity": "sha1-d029wdkPd12/HjGfbtQrJgYjth8=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.6.tgz",
+      "integrity": "sha1-TT2aanvyzz3kBYphWuBZ7/ZB+jY=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/router": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.5.tgz",
-      "integrity": "sha1-9zEwz0h9mjLMGYiv2llmX0Siiok=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.6.tgz",
+      "integrity": "sha1-D2rSmuD/jSyeo3m9MgRHIXt+yGY=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/tsc-wrapped": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.5.tgz",
-      "integrity": "sha1-MKDLtDpmOqddyphIlL5IE3eN3Jw=",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.6.tgz",
+      "integrity": "sha1-Fnh8u/UL3H5zgSOxnDJSfyROF40=",
       "dev": true,
       "requires": {
         "tsickle": "0.21.6"
diff --git a/package.json b/package.json
index 3d044b82..98d73d90 100644
--- a/package.json
+++ b/package.json
@@ -16,18 +16,18 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.1",
-    "@angular/animations": "4.4.5",
+    "@angular/animations": "4.4.6",
     "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.4.5",
-    "@angular/compiler": "4.4.5",
-    "@angular/core": "4.4.5",
+    "@angular/common": "4.4.6",
+    "@angular/compiler": "4.4.6",
+    "@angular/core": "4.4.6",
     "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.4.5",
-    "@angular/http": "4.4.5",
+    "@angular/forms": "4.4.6",
+    "@angular/http": "4.4.6",
     "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/router": "4.4.5",
+    "@angular/platform-browser": "4.4.6",
+    "@angular/platform-browser-dynamic": "4.4.6",
+    "@angular/router": "4.4.6",
     "@swimlane/ngx-charts": "6.0.2",
     "@swimlane/ngx-datatable": "9.3.1",
     "@swimlane/ngx-dnd": "3.0.0",
@@ -50,8 +50,8 @@
   },
   "devDependencies": {
     "@angular/cli": "1.4.7",
-    "@angular/compiler-cli": "4.4.5",
-    "@angular/language-service": "4.4.5",
+    "@angular/compiler-cli": "4.4.6",
+    "@angular/language-service": "4.4.6",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.6.0",
     "@types/jasminewd2": "2.0.2",
diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index 29d66d7f..083e0f80 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -222,6 +222,62 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     }
                 }
             }
+
+            // Tabbed
+            &.tabbed {
+
+                > mat-sidenav-container {
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        width: calc(100% - 240px);
+
+                        .center {
+                            width: calc(100% - 32px);
+
+                            @include media-breakpoint-down('md') {
+                                width: calc(100% - 64px);
+                            }
+
+                            .header {
+                                flex: 1;
+                            }
+
+                            .content-card {
+
+                                .content {
+
+                                    .mat-tab-group {
+                                        overflow: hidden;
+
+                                        .mat-tab-header {
+
+                                            .mat-tab-label {
+                                                height: 64px;
+                                            }
+                                        }
+
+                                        .mat-tab-body {
+                                            overflow: hidden;
+
+                                            .mat-tab-body-content {
+                                                overflow: hidden;
+
+                                                .tab-content {
+                                                    position: relative;
+                                                    width: 100%;
+                                                    height: 100%;
+                                                    overflow: auto;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
 
         // Left sidenav
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
new file mode 100644
index 00000000..b6ec0879
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
@@ -0,0 +1,151 @@
+<div class="page-layout carded left-sidenav tabbed single-scroll" fusePerfectScrollbar>
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <mat-sidenav-container>
+
+        <!-- SIDENAV -->
+        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+                <h2>Sidenav header</h2>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </mat-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header white-fg p-24">
+
+                <div fxLayout="row" fxLayoutAlign="start center">
+
+                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                            fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
+                        <mat-icon>menu</mat-icon>
+                    </button>
+
+                    <h2>Left sidenav with tabs and page scroll</h2>
+
+                </div>
+
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card mat-white-bg">
+
+                <!-- CONTENT -->
+                <div class="content">
+
+                    <mat-tab-group>
+
+                        <mat-tab label="Tab 1">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 2">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 3">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 4">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 5">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 6">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 7">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 8">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 9">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 10">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                    </mat-tab-group>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </mat-sidenav-container>
+
+</div>
\ No newline at end of file
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts
new file mode 100644
index 00000000..8c03df33
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-left-sidenav-2-tabbed',
+    templateUrl: './left-sidenav-2-tabbed.component.html',
+    styleUrls  : ['./left-sidenav-2-tabbed.component.scss']
+})
+export class FuseCardedLeftSidenav2TabbedComponent
+{
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
index 4c3029cc..40568699 100644
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
@@ -11,14 +11,16 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
             <div class="content p-24" fusePerfectScrollbar>
+
                 <fuse-demo-sidenav></fuse-demo-sidenav>
+
             </div>
             <!-- / SIDENAV CONTENT -->
 
@@ -65,4 +67,4 @@
 
     </mat-sidenav-container>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
new file mode 100644
index 00000000..ab227d64
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
@@ -0,0 +1,151 @@
+<div class="page-layout carded left-sidenav tabbed" fusePerfectScrollbar>
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <mat-sidenav-container>
+
+        <!-- SIDENAV -->
+        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+                <h2>Sidenav header</h2>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </mat-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header white-fg p-24">
+
+                <div fxLayout="row" fxLayoutAlign="start center">
+
+                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                            fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
+                        <mat-icon>menu</mat-icon>
+                    </button>
+
+                    <h2>Left sidenav with tabs and content scroll</h2>
+
+                </div>
+
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card mat-white-bg">
+
+                <!-- CONTENT -->
+                <div class="content">
+
+                    <mat-tab-group>
+
+                        <mat-tab label="Tab 1">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 2">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 3">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 4">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 5">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 6">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 7">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 8">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 9">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 10">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                    </mat-tab-group>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </mat-sidenav-container>
+
+</div>
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss b/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts b/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
new file mode 100644
index 00000000..0a44a54a
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-left-sidenav-tabbed',
+    templateUrl: './left-sidenav-tabbed.component.html',
+    styleUrls  : ['./left-sidenav-tabbed.component.scss']
+})
+export class FuseCardedLeftSidenavTabbedComponent
+{
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
index 703115a6..7fc494b8 100644
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
new file mode 100644
index 00000000..fe4395a4
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
@@ -0,0 +1,151 @@
+<div class="page-layout carded right-sidenav tabbed single-scroll" fusePerfectScrollbar>
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <mat-sidenav-container>
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header white-fg p-24">
+
+                <div fxLayout="row" fxLayoutAlign="start center">
+
+                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                            fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
+                        <mat-icon>menu</mat-icon>
+                    </button>
+
+                    <h2>Right sidenav with tabs and page scroll</h2>
+
+                </div>
+
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card mat-white-bg">
+
+                <!-- CONTENT -->
+                <div class="content">
+
+                    <mat-tab-group>
+
+                        <mat-tab label="Tab 1">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 2">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 3">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 4">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 5">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 6">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 7">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 8">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 9">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 10">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                    </mat-tab-group>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+        <!-- SIDENAV -->
+        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+                <h2>Sidenav header</h2>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </mat-sidenav>
+        <!-- / SIDENAV -->
+
+    </mat-sidenav-container>
+
+</div>
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts
new file mode 100644
index 00000000..ceaec07f
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-right-sidenav-2-tabbed',
+    templateUrl: './right-sidenav-2-tabbed.component.html',
+    styleUrls  : ['./right-sidenav-2-tabbed.component.scss']
+})
+export class FuseCardedRightSidenav2TabbedComponent
+{
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
index bcaf7676..3031463a 100644
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
@@ -49,14 +49,16 @@
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
             <div class="content p-24" fusePerfectScrollbar>
+
                 <fuse-demo-sidenav></fuse-demo-sidenav>
+
             </div>
             <!-- / SIDENAV CONTENT -->
 
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
new file mode 100644
index 00000000..98bfbf91
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
@@ -0,0 +1,151 @@
+<div class="page-layout carded right-sidenav tabbed" fusePerfectScrollbar>
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <mat-sidenav-container>
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header white-fg p-24">
+
+                <div fxLayout="row" fxLayoutAlign="start center">
+
+                    <button mat-button class="mat-icon-button sidenav-toggle mr-8"
+                            fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
+                        <mat-icon>menu</mat-icon>
+                    </button>
+
+                    <h2>Right sidenav with tabs and content scroll</h2>
+
+                </div>
+
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card mat-white-bg">
+
+                <!-- CONTENT -->
+                <div class="content">
+
+                    <mat-tab-group>
+
+                        <mat-tab label="Tab 1">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 2">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 3">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 4">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 5">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 6">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 7">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 8">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 9">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                        <mat-tab label="Tab 10">
+                            <div class="tab-content p-24" fusePerfectScrollbar>
+                                <!-- PUT YOUR TAB CONTENT HERE -->
+                                <fuse-demo-content></fuse-demo-content>
+                                <!-- / PUT YOUR TAB CONTENT HERE -->
+                            </div>
+                        </mat-tab>
+
+                    </mat-tab-group>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+        <!-- SIDENAV -->
+        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+                <h2>Sidenav header</h2>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </mat-sidenav>
+        <!-- / SIDENAV -->
+
+    </mat-sidenav-container>
+
+</div>
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss b/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts b/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts
new file mode 100644
index 00000000..371cb1ef
--- /dev/null
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-right-sidenav-tabbed',
+    templateUrl: './right-sidenav-tabbed.component.html',
+    styleUrls  : ['./right-sidenav-tabbed.component.scss']
+})
+export class FuseCardedRightSidenavTabbedComponent
+{
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
index 167b0927..f123fa23 100644
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
@@ -49,14 +49,16 @@
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24">
+            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
             <div class="content p-24" fusePerfectScrollbar>
+
                 <fuse-demo-sidenav></fuse-demo-sidenav>
+
             </div>
             <!-- / SIDENAV CONTENT -->
 
diff --git a/src/app/main/content/ui/page-layouts/page-layouts.module.ts b/src/app/main/content/ui/page-layouts/page-layouts.module.ts
index 12416e2d..e11436dd 100644
--- a/src/app/main/content/ui/page-layouts/page-layouts.module.ts
+++ b/src/app/main/content/ui/page-layouts/page-layouts.module.ts
@@ -5,9 +5,13 @@ import { FuseDemoModule } from '../../../../core/components/demo/demo.module';
 import { FuseCardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
 import { FuseCardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
 import { FuseCardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component';
+import { FuseCardedLeftSidenavTabbedComponent } from './carded/left-sidenav-tabbed/left-sidenav-tabbed.component';
 import { FuseCardedLeftSidenav2Component } from './carded/left-sidenav-2/left-sidenav-2.component';
+import { FuseCardedLeftSidenav2TabbedComponent } from './carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component';
 import { FuseCardedRightSidenavComponent } from './carded/right-sidenav/right-sidenav.component';
+import { FuseCardedRightSidenavTabbedComponent } from './carded/right-sidenav-tabbed/right-sidenav-tabbed.component';
 import { FuseCardedRightSidenav2Component } from './carded/right-sidenav-2/right-sidenav-2.component';
+import { FuseCardedRightSidenav2TabbedComponent } from './carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component';
 import { FuseSimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
 import { FuseSimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
 import { FuseSimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component';
@@ -31,18 +35,34 @@ const routes: Routes = [
         path     : 'ui/page-layouts/carded/left-sidenav',
         component: FuseCardedLeftSidenavComponent
     },
+    {
+        path     : 'ui/page-layouts/carded/left-sidenav-tabbed',
+        component: FuseCardedLeftSidenavTabbedComponent
+    },
     {
         path     : 'ui/page-layouts/carded/left-sidenav-2',
         component: FuseCardedLeftSidenav2Component
     },
+    {
+        path     : 'ui/page-layouts/carded/left-sidenav-2-tabbed',
+        component: FuseCardedLeftSidenav2TabbedComponent
+    },
     {
         path     : 'ui/page-layouts/carded/right-sidenav',
         component: FuseCardedRightSidenavComponent
     },
+    {
+        path     : 'ui/page-layouts/carded/right-sidenav-tabbed',
+        component: FuseCardedRightSidenavTabbedComponent
+    },
     {
         path     : 'ui/page-layouts/carded/right-sidenav-2',
         component: FuseCardedRightSidenav2Component
     },
+    {
+        path     : 'ui/page-layouts/carded/right-sidenav-2-tabbed',
+        component: FuseCardedRightSidenav2TabbedComponent
+    },
     {
         path     : 'ui/page-layouts/simple/full-width',
         component: FuseSimpleFullWidthComponent
@@ -91,9 +111,13 @@ const routes: Routes = [
         FuseCardedFullWidthComponent,
         FuseCardedFullWidth2Component,
         FuseCardedLeftSidenavComponent,
+        FuseCardedLeftSidenavTabbedComponent,
         FuseCardedLeftSidenav2Component,
+        FuseCardedLeftSidenav2TabbedComponent,
         FuseCardedRightSidenavComponent,
+        FuseCardedRightSidenavTabbedComponent,
         FuseCardedRightSidenav2Component,
+        FuseCardedRightSidenav2TabbedComponent,
         FuseSimpleFullWidthComponent,
         FuseSimpleLeftSidenavComponent,
         FuseSimpleLeftSidenav2Component,
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 6bb0f384..231d9b9b 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -330,23 +330,47 @@ export class NavigationModel
                                         'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/left-sidenav'
                                     },
+                                    {
+                                        'id'   : 'left-sidenav-tabbed',
+                                        'title': 'Left Sidenav Tabbed',
+                                        'type' : 'item',
+                                        'url'  : '/ui/page-layouts/carded/left-sidenav-tabbed'
+                                    },
                                     {
                                         'id'   : 'left-sidenav-2',
                                         'title': 'Left Sidenav 2',
                                         'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/left-sidenav-2'
                                     },
+                                    {
+                                        'id'   : 'left-sidenav-2-tabbed',
+                                        'title': 'Left Sidenav 2 Tabbed',
+                                        'type' : 'item',
+                                        'url'  : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
+                                    },
                                     {
                                         'id'   : 'right-sidenav',
                                         'title': 'Right Sidenav',
                                         'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav'
                                     },
+                                    {
+                                        'id'   : 'right-sidenav-tabbed',
+                                        'title': 'Right Sidenav Tabbed',
+                                        'type' : 'item',
+                                        'url'  : '/ui/page-layouts/carded/right-sidenav-tabbed'
+                                    },
                                     {
                                         'id'   : 'right-sidenav-2',
                                         'title': 'Right Sidenav 2',
                                         'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav-2'
+                                    },
+                                    {
+                                        'id'   : 'right-sidenav-2-tabbed',
+                                        'title': 'Right Sidenav 2 Tabbed',
+                                        'type' : 'item',
+                                        'url'  : '/ui/page-layouts/carded/right-sidenav-2-tabbed'
                                     }
                                 ]
                             },

From fe8b44b14cfd2816a37b01c42918b0fb18c37148 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 24 Oct 2017 10:19:17 +0300
Subject: [PATCH 03/11] Fixed: FAQ page header shrinks on small heights

---
 src/app/main/content/pages/faq/faq.component.html | 3 +--
 src/app/main/content/pages/faq/faq.component.scss | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/main/content/pages/faq/faq.component.html b/src/app/main/content/pages/faq/faq.component.html
index eea80bd4..4ccb44cd 100644
--- a/src/app/main/content/pages/faq/faq.component.html
+++ b/src/app/main/content/pages/faq/faq.component.html
@@ -1,8 +1,7 @@
 <div id="faq" class="page-layout simple" fusePerfectScrollbar>
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-16 p-sm-24"
-         fxLayout="column" fxLayoutAlign="center center">
+    <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
 
         <div class="hero-text mb-32">
             <h1>We're here to help</h1>
diff --git a/src/app/main/content/pages/faq/faq.component.scss b/src/app/main/content/pages/faq/faq.component.scss
index 131f21d7..ea7db673 100644
--- a/src/app/main/content/pages/faq/faq.component.scss
+++ b/src/app/main/content/pages/faq/faq.component.scss
@@ -3,6 +3,7 @@
 :host {
 
     .header {
+        flex: 1 0 auto;
         height: 360px;
         background: #1A237E;
         background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);

From b7cb09b087135fb88f17279a90bc96737e034b0b Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 24 Oct 2017 11:02:40 +0300
Subject: [PATCH 04/11] Small adjustment on the layout mode setting

---
 src/app/main/main.component.scss | 12 ++++++------
 src/app/main/main.component.ts   |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss
index 85dcb0f1..2c1b6977 100644
--- a/src/app/main/main.component.scss
+++ b/src/app/main/main.component.scss
@@ -6,12 +6,6 @@ fuse-main {
     width: 100%;
     height: 100%;
 
-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-        @include mat-elevation(8);
-    }
-
     > .mat-sidenav-container {
         display: flex;
         flex: 1;
@@ -72,4 +66,10 @@ fuse-main {
             }
         }
     }
+
+    &[fuse-layout-mode="boxed"] {
+        max-width: 1200px;
+        margin: 0 auto;
+        @include mat-elevation(8);
+    }
 }
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index c7896e3c..a8a7ce5c 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -14,7 +14,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
 {
     onSettingsChanged: Subscription;
     fuseSettings: any;
-    @HostBinding('class.boxed') boxed;
+    @HostBinding('attr.fuse-layout-mode') layoutMode;
 
     constructor(
         private _renderer: Renderer2,
@@ -29,7 +29,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
-                        this.boxed = this.fuseSettings.layout.mode === 'boxed';
+                        this.layoutMode = this.fuseSettings.layout.mode;
                     }
                 );
 

From 98e2ff0e1e6242fe392a59d2189dcf459194677f Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 24 Oct 2017 11:47:10 +0300
Subject: [PATCH 05/11] Small adjustment on the FAQ page header

---
 src/app/main/content/pages/faq/faq.component.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/main/content/pages/faq/faq.component.scss b/src/app/main/content/pages/faq/faq.component.scss
index ea7db673..2bf54830 100644
--- a/src/app/main/content/pages/faq/faq.component.scss
+++ b/src/app/main/content/pages/faq/faq.component.scss
@@ -5,6 +5,7 @@
     .header {
         flex: 1 0 auto;
         height: 360px;
+        max-height: 360px;
         background: #1A237E;
         background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
 

From 9ecd921722e48ad876ef6ef7f2480f6f16c75427 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 24 Oct 2017 15:41:44 +0300
Subject: [PATCH 06/11] File based translations - multi language + Example in
 the Mail app + Component/doc page for translations

---
 package-lock.json                             |   5 +
 package.json                                  |   1 +
 src/app/app.component.ts                      |  14 +-
 src/app/app.module.ts                         |   2 +
 src/app/core/modules/shared.module.ts         |   8 +-
 .../services/translation-loader.service.ts    |  27 ++++
 src/app/main/content/apps/mail/i18n/en.ts     |  14 ++
 src/app/main/content/apps/mail/i18n/tr.ts     |  14 ++
 .../mail-details/mail-details.component.html  |   8 +-
 .../mail/mail-list/mail-list.component.html   |   2 +-
 .../content/apps/mail/mail.component.html     |   2 +-
 .../main/content/apps/mail/mail.component.ts  |   9 +-
 .../sidenavs/main/main-sidenav.component.html |   8 +-
 .../content/components/components.module.ts   |   6 +
 .../multi-language.component.html             | 138 ++++++++++++++++++
 .../multi-language.component.scss             |  13 ++
 .../multi-language.component.ts               |  13 ++
 src/app/main/toolbar/toolbar.component.html   |   2 +-
 src/app/main/toolbar/toolbar.component.ts     |  18 ++-
 src/app/navigation.model.ts                   |   7 +
 20 files changed, 292 insertions(+), 19 deletions(-)
 create mode 100644 src/app/core/services/translation-loader.service.ts
 create mode 100644 src/app/main/content/apps/mail/i18n/en.ts
 create mode 100644 src/app/main/content/apps/mail/i18n/tr.ts
 create mode 100644 src/app/main/content/components/multi-language/multi-language.component.html
 create mode 100644 src/app/main/content/components/multi-language/multi-language.component.scss
 create mode 100644 src/app/main/content/components/multi-language/multi-language.component.ts

diff --git a/package-lock.json b/package-lock.json
index 8136dfed..7c1c84de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -268,6 +268,11 @@
       "integrity": "sha1-w6DFRNYjkqzCgTpCyKDcb1j4aSI=",
       "dev": true
     },
+    "@ngx-translate/core": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-8.0.0.tgz",
+      "integrity": "sha1-dR/WtRLYDzp0jS3o38lt/vopr+A="
+    },
     "@schematics/angular": {
       "version": "0.0.45",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.0.45.tgz",
diff --git a/package.json b/package.json
index 98d73d90..c7bae3e7 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@angular/platform-browser": "4.4.6",
     "@angular/platform-browser-dynamic": "4.4.6",
     "@angular/router": "4.4.6",
+    "@ngx-translate/core": "8.0.0",
     "@swimlane/ngx-charts": "6.0.2",
     "@swimlane/ngx-datatable": "9.3.1",
     "@swimlane/ngx-dnd": "3.0.0",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 491dd3a0..29e2809f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector   : 'fuse-root',
@@ -8,7 +9,18 @@ import { FuseSplashScreenService } from './core/services/splash-screen.service';
 })
 export class AppComponent
 {
-    constructor(private fuseSplashScreen: FuseSplashScreenService)
+    constructor(
+        private fuseSplashScreen: FuseSplashScreenService,
+        private translate: TranslateService
+    )
     {
+        // Add languages
+        this.translate.addLangs(['en', 'tr']);
+
+        // Set the default language
+        this.translate.setDefaultLang('en');
+
+        // Use a language
+        this.translate.use('en');
     }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ad6fbdb6..c125b9bd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { ComponentsThirdPartyModule } from './main/content/components-third-part
 import { ServicesModule } from './main/content/services/services.module';
 import { FuseAngularMaterialModule } from './main/content/components/angular-material/angular-material.module';
 import { MarkdownModule } from 'angular2-markdown';
+import { TranslateModule } from '@ngx-translate/core';
 
 const appRoutes: Routes = [
     {
@@ -69,6 +70,7 @@ const appRoutes: Routes = [
         RouterModule.forRoot(appRoutes),
         SharedModule,
         MarkdownModule.forRoot(),
+        TranslateModule.forRoot(),
 
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {
             delay             : 0,
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index fe2787f2..bec7938c 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -19,8 +19,10 @@ import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
+import { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
 import { MarkdownModule } from 'angular2-markdown';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
     declarations   : [
@@ -62,7 +64,8 @@ import { MarkdownModule } from 'angular2-markdown';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        MarkdownModule
+        MarkdownModule,
+        TranslateModule
     ],
     entryComponents: [
         FuseConfirmDialogComponent
@@ -71,7 +74,8 @@ import { MarkdownModule } from 'angular2-markdown';
         CookieService,
         FuseMatchMedia,
         FuseNavbarVerticalService,
-        FuseMatSidenavHelperService
+        FuseMatSidenavHelperService,
+        FuseTranslationLoaderService
     ]
 })
 
diff --git a/src/app/core/services/translation-loader.service.ts b/src/app/core/services/translation-loader.service.ts
new file mode 100644
index 00000000..27283713
--- /dev/null
+++ b/src/app/core/services/translation-loader.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface Locale
+{
+    lang: string;
+    data: Object;
+}
+
+@Injectable()
+export class FuseTranslationLoaderService
+{
+    constructor(private translate: TranslateService)
+    {
+    }
+
+    public loadTranslations(...args: Locale[]): void
+    {
+        const locales = [...args];
+
+        locales.forEach((locale) => {
+            // use setTranslation() with the third argument set to true
+            // to append translations instead of replacing them
+            this.translate.setTranslation(locale.lang, locale.data, true);
+        });
+    }
+}
diff --git a/src/app/main/content/apps/mail/i18n/en.ts b/src/app/main/content/apps/mail/i18n/en.ts
new file mode 100644
index 00000000..1e3b4b34
--- /dev/null
+++ b/src/app/main/content/apps/mail/i18n/en.ts
@@ -0,0 +1,14 @@
+export const locale = {
+    lang: 'en',
+    data: {
+        'MAIL': {
+            'COMPOSE'                 : 'COMPOSE',
+            'FOLDERS'                 : 'FOLDERS',
+            'FILTERS'                 : 'FILTERS',
+            'LABELS'                  : 'LABELS',
+            'NO_MESSAGES'             : 'There are no messages!',
+            'SELECT_A_MESSAGE_TO_READ': 'Select a message to read',
+            'SEARCH_PLACEHOLDER': 'Search for an e-mail or contact'
+        }
+    }
+};
diff --git a/src/app/main/content/apps/mail/i18n/tr.ts b/src/app/main/content/apps/mail/i18n/tr.ts
new file mode 100644
index 00000000..03a524de
--- /dev/null
+++ b/src/app/main/content/apps/mail/i18n/tr.ts
@@ -0,0 +1,14 @@
+export const locale = {
+    lang: 'tr',
+    data: {
+        'MAIL': {
+            'COMPOSE'                 : 'YENİ E-POSTA',
+            'FOLDERS'                 : 'KLASÖRLER',
+            'FILTERS'                 : 'FİLTRELER',
+            'LABELS'                  : 'ETİKETLER',
+            'NO_MESSAGES'             : 'Mesajiniz bulunmamakta!',
+            'SELECT_A_MESSAGE_TO_READ': 'Okumak için bir mesaj seçin',
+            'SEARCH_PLACEHOLDER'      : 'E-mail yada bir kişi arayın'
+        }
+    }
+};
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
index c85a005f..87b785b2 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
@@ -1,6 +1,10 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <mat-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</mat-icon>
-    <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a message to read</span>
+    <mat-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
+        email
+    </mat-icon>
+    <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">
+        <span>{{ 'MAIL.SELECT_A_MESSAGE_TO_READ' | translate }}</span>
+    </span>
 </div>
 
 <div *ngIf="mail">
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.html b/src/app/main/content/apps/mail/mail-list/mail-list.component.html
index 4fbf9b80..0873a1fd 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.html
+++ b/src/app/main/content/apps/mail/mail-list/mail-list.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="mails.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
-    <span class="no-messages-text hint-text">There are no messages!</span>
+    <span class="no-messages-text hint-text">{{ 'MAIL.NO_MESSAGES' | translate }}</span>
 </div>
 
 <div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
diff --git a/src/app/main/content/apps/mail/mail.component.html b/src/app/main/content/apps/mail/mail.component.html
index 2ade9fd3..e68bc7e2 100644
--- a/src/app/main/content/apps/mail/mail.component.html
+++ b/src/app/main/content/apps/mail/mail.component.html
@@ -29,7 +29,7 @@
 
                     <div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
                         <mat-icon>search</mat-icon>
-                        <input [formControl]="searchInput" placeholder="Search for an e-mail or contact" fxFlex>
+                        <input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex>
                     </div>
                 </div>
 
diff --git a/src/app/main/content/apps/mail/mail.component.ts b/src/app/main/content/apps/mail/mail.component.ts
index cbee6a70..f8c04d9c 100644
--- a/src/app/main/content/apps/mail/mail.component.ts
+++ b/src/app/main/content/apps/mail/mail.component.ts
@@ -3,6 +3,9 @@ import { MailService } from './mail.service';
 import { Subscription } from 'rxjs/Subscription';
 import { FormControl } from '@angular/forms';
 import { Mail } from './mail.model';
+import { FuseTranslationLoaderService } from '../../../../core/services/translation-loader.service';
+import { locale as english } from './i18n/en';
+import { locale as turkish } from './i18n/tr';
 
 @Component({
     selector   : 'fuse-mail',
@@ -25,9 +28,13 @@ export class FuseMailComponent implements OnInit, OnDestroy
     onLabelsChanged: Subscription;
     onCurrentMailChanged: Subscription;
 
-    constructor(private mailService: MailService)
+    constructor(
+        private mailService: MailService,
+        private translationLoader: FuseTranslationLoaderService
+    )
     {
         this.searchInput = new FormControl('');
+        this.translationLoader.loadTranslations(english, turkish);
     }
 
     ngOnInit()
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
index b967b4cc..52a74963 100644
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -30,13 +30,13 @@
                 class="mat-accent compose-dialog-button"
                 (click)="composeDialog()"
                 aria-label="Compose">
-            COMPOSE
+            {{ 'MAIL.COMPOSE' | translate }}
         </button>
     </div>
 
     <div class="nav">
 
-        <div class="nav-subheader">FOLDERS</div>
+        <div class="nav-subheader">{{ 'MAIL.FOLDERS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let folder of folders">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
@@ -45,7 +45,7 @@
             </a>
         </div>
 
-        <div class="nav-subheader">FILTERS</div>
+        <div class="nav-subheader">{{ 'MAIL.FILTERS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let filter of filters">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
@@ -54,7 +54,7 @@
             </a>
         </div>
 
-        <div class="nav-subheader">LABELS</div>
+        <div class="nav-subheader">{{ 'MAIL.LABELS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let label of labels">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts
index c9cf1b67..c9ff020b 100644
--- a/src/app/main/content/components/components.module.ts
+++ b/src/app/main/content/components/components.module.ts
@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseCountdownDocsComponent } from './countdown/countdown.component';
 import { FuseHljsDocsComponent } from './hljs/hljs.component';
 import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
+import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
 import { FuseNavigationDocsComponent } from './navigation/navigation.component';
 import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
 import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component';
@@ -23,6 +24,10 @@ const routes = [
         path     : 'components/material-color-picker',
         component: FuseMaterialColorPickerDocsComponent
     },
+    {
+        path     : 'components/multi-language',
+        component: FuseMultiLanguageDocsComponent
+    },
     {
         path     : 'components/navigation',
         component: FuseNavigationDocsComponent
@@ -51,6 +56,7 @@ const routes = [
         FuseCountdownDocsComponent,
         FuseHljsDocsComponent,
         FuseMaterialColorPickerDocsComponent,
+        FuseMultiLanguageDocsComponent,
         FuseNavigationDocsComponent,
         FuseSearchBarDocsComponent,
         FuseShortcutsDocsComponent,
diff --git a/src/app/main/content/components/multi-language/multi-language.component.html b/src/app/main/content/components/multi-language/multi-language.component.html
new file mode 100644
index 00000000..76abc8f6
--- /dev/null
+++ b/src/app/main/content/components/multi-language/multi-language.component.html
@@ -0,0 +1,138 @@
+<div id="multi-language" class="page-layout simple fullwidth" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Multi Language</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            Fuse uses <a class="link" href="https://github.com/ngx-translate/core" target="_blank">ngx-translate</a>
+            module and supports multiple languages and translations.
+        </p>
+
+        <p class="warning-box">
+            Since not everybody need multi-language setup for their apps, we decided NOT to put translations everywhere.
+            If you want to see the translations in action, visit <a class="link" [routerLink]="'/apps/mail'">
+            Mail</a> app and then change the language from the <b>Toolbar.</b>
+            <br><br>
+            Mail app is the only app that has translations for demonstration purposes. You can look at its source code
+            to see the usage.
+        </p>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p>In order to use the translations, create your translation file within the module you want to use
+                the translations. For example, for the Mail app, create <code>i18n/en.ts</code> file inside the
+                <code>apps/mail</code> folder.
+            </p>
+            <p>
+                The structure of the translation file is important and it must define the language id along with the
+                translation data:
+            </p>
+
+            <p class="mat-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        // i18n/en.ts
+                        export const locale = {
+                            lang: 'en',
+                            data: {
+                                'MAIL': {
+                                    'COMPOSE': 'COMPOSE'
+                                }
+                            }
+                        };
+
+                        // i18n/tr.ts
+                        export const locale = {
+                            lang: 'en',
+                            data: {
+                                'MAIL': {
+                                    'COMPOSE': 'YENİ E-POSTA'
+                                }
+                            }
+                        };
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <p>
+                After you create your translation files, open the <code>*.component.ts</code> file for the module you
+                want to have translations, and register your translation file. For this example, we will use the
+                <code>mail.component.ts</code> file:
+            </p>
+
+            <p class="mat-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        // Your imports
+                        import { ... } from '..';
+
+                        // Import the locale files
+                        import { locale as english } from './i18n/en';
+                        import { locale as turkish } from './i18n/tr';
+
+                        @Component({
+                            selector   : 'fuse-mail',
+                            templateUrl: './mail.component.html',
+                            styleUrls  : ['./mail.component.scss']
+                        })
+                        export class FuseMailComponent
+                        {
+                            constructor(private translationLoader: FuseTranslationLoaderService)
+                            {
+                                this.translationLoader.loadTranslations(english, turkish);
+                            }
+
+                            ...
+                        }
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Changing the language</h2>
+            <p class="py-8">
+                Changing the current language can happen instantly. Simply call the <code>use</code> method from the
+                translate service:
+            </p>
+            <p class="mat-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        import { TranslateService } from '@ngx-translate/core';
+
+                        constructor(private translate: TranslateService) {}
+
+                        setLanguage()
+                        {
+                            // Use the selected language for translations
+                            this.translate.use('tr');
+                        }
+                    </textarea>
+                </fuse-hljs>
+            </p>
+            <p>
+                More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>
+                file.
+            </p>
+        </div>
+
+
+    </div>
+
+</div>
+
diff --git a/src/app/main/content/components/multi-language/multi-language.component.scss b/src/app/main/content/components/multi-language/multi-language.component.scss
new file mode 100644
index 00000000..48d549ab
--- /dev/null
+++ b/src/app/main/content/components/multi-language/multi-language.component.scss
@@ -0,0 +1,13 @@
+:host {
+
+    .content{
+        max-width: 1100px;
+
+        .warning-box{
+            background: #FFFDE7;
+            border: 1px solid #FFC107;
+            padding: 16px;
+        }
+    }
+
+}
diff --git a/src/app/main/content/components/multi-language/multi-language.component.ts b/src/app/main/content/components/multi-language/multi-language.component.ts
new file mode 100644
index 00000000..fc9385a4
--- /dev/null
+++ b/src/app/main/content/components/multi-language/multi-language.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-multi-language-docs',
+    templateUrl: './multi-language.component.html',
+    styleUrls  : ['./multi-language.component.scss']
+})
+export class FuseMultiLanguageDocsComponent
+{
+    constructor()
+    {
+    }
+}
diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html
index 42d13d58..6f15f5dc 100644
--- a/src/app/main/toolbar/toolbar.component.html
+++ b/src/app/main/toolbar/toolbar.component.html
@@ -71,7 +71,7 @@
             </button>
 
             <mat-menu #languageMenu="matMenu">
-                <button mat-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
+                <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <div fxLayout="row" fxLayoutAlign="start center">
                         <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
diff --git a/src/app/main/toolbar/toolbar.component.ts b/src/app/main/toolbar/toolbar.component.ts
index 5c7368e4..11727cc9 100644
--- a/src/app/main/toolbar/toolbar.component.ts
+++ b/src/app/main/toolbar/toolbar.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { FuseConfigService } from '../../core/services/config.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -18,7 +19,8 @@ export class FuseToolbarComponent
 
     constructor(
         private router: Router,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private translate: TranslateService
     )
     {
         this.userStatusOptions = [
@@ -55,11 +57,6 @@ export class FuseToolbarComponent
                 'title': 'English',
                 'flag' : 'us'
             },
-            {
-                'id'   : 'es',
-                'title': 'Spanish',
-                'flag' : 'es'
-            },
             {
                 'id'   : 'tr',
                 'title': 'Turkish',
@@ -92,4 +89,13 @@ export class FuseToolbarComponent
         // Do your search here...
         console.log(value);
     }
+
+    setLanguage(lang)
+    {
+        // Set the selected language for toolbar
+        this.selectedLanguage = lang;
+
+        // Use the selected language for translations
+        this.translate.use(lang.id);
+    }
 }
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 231d9b9b..727d44e2 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -725,6 +725,13 @@ export class NavigationModel
                         'icon' : 'settings_input_component',
                         'url'  : '/components/material-color-picker'
                     },
+                    {
+                        'id'   : 'multi-language',
+                        'title': 'Multi Language',
+                        'type' : 'item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/multi-language'
+                    },
                     {
                         'id'   : 'navigation',
                         'title': 'Navigation',

From f43608f93b9faeda5699806eb5aff75ae7893164 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 24 Oct 2017 16:02:09 +0300
Subject: [PATCH 07/11] Added a "Learn more" link to the language switcher for
 the demo

---
 src/app/main/toolbar/toolbar.component.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html
index 6f15f5dc..93b1f3ca 100644
--- a/src/app/main/toolbar/toolbar.component.html
+++ b/src/app/main/toolbar/toolbar.component.html
@@ -71,12 +71,20 @@
             </button>
 
             <mat-menu #languageMenu="matMenu">
+
                 <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <div fxLayout="row" fxLayoutAlign="start center">
                         <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
                     </div>
                 </button>
+
+                <button mat-menu-item [routerLink]="'/components/multi-language'">
+                    <div fxLayout="row" fxLayoutAlign="start center">
+                        <span>Learn more</span>
+                    </div>
+                </button>
+
             </mat-menu>
 
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>

From aaa14eb1e93e5936e93647f3725793d3a180b1d1 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 25 Oct 2017 10:15:19 +0300
Subject: [PATCH 08/11] Fixed: Stagger animation doesn't have {optional:true}

---
 src/app/core/animations.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts
index 193b9e10..b5ff37d2 100644
--- a/src/app/core/animations.ts
+++ b/src/app/core/animations.ts
@@ -33,21 +33,21 @@ export const fuseAnimations = [
                     stagger('50ms', [
                         animateChild()
                     ])
-                ])),
+                ], {optional: true})),
         transition('void => 100',
             query('@*',
                 [
                     stagger('100ms', [
                         animateChild()
                     ])
-                ])),
+                ], {optional: true})),
         transition('void => 200',
             query('@*',
                 [
                     stagger('200ms', [
                         animateChild()
                     ])
-                ]))
+                ], {optional: true}))
     ]),
 
     trigger('fadeInOut', [

From 5d56b3bcd602f5e4e6e7c0f7bf32b585559bc0fc Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 25 Oct 2017 13:09:17 +0300
Subject: [PATCH 09/11] Small typo on FAQ page

---
 src/app/fuse-fake-db/fuse-fake-db.service.ts |   4 +-
 src/app/fuse-fake-db/knowledge-base.ts       | 113 +++++++++++++++++++
 src/app/main/content/pages/faq/faq.module.ts |   2 +-
 3 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/app/fuse-fake-db/knowledge-base.ts

diff --git a/src/app/fuse-fake-db/fuse-fake-db.service.ts b/src/app/fuse-fake-db/fuse-fake-db.service.ts
index 84a2c09c..7ab922a2 100644
--- a/src/app/fuse-fake-db/fuse-fake-db.service.ts
+++ b/src/app/fuse-fake-db/fuse-fake-db.service.ts
@@ -14,6 +14,7 @@ import { IconsFakeDb } from './icons';
 import { ProjectsDashboardDb } from './projects-dashboard';
 import { ScrumboardFakeDb } from './scrumboard';
 import { FaqFakeDb } from './faq';
+import { KnowledgeBaseFakeDb } from './knowledge-base';
 
 export class FuseFakeDbService implements InMemoryDbService
 {
@@ -46,7 +47,8 @@ export class FuseFakeDbService implements InMemoryDbService
             'projects-dashboard-projects': ProjectsDashboardDb.projects,
             'projects-dashboard-widgets' : ProjectsDashboardDb.widgets,
             'scrumboard-boards'          : ScrumboardFakeDb.boards,
-            'faq'                        : FaqFakeDb.data
+            'faq'                        : FaqFakeDb.data,
+            'knowledge-base'             : KnowledgeBaseFakeDb.data
         };
     }
 }
diff --git a/src/app/fuse-fake-db/knowledge-base.ts b/src/app/fuse-fake-db/knowledge-base.ts
new file mode 100644
index 00000000..0474428a
--- /dev/null
+++ b/src/app/fuse-fake-db/knowledge-base.ts
@@ -0,0 +1,113 @@
+export class KnowledgeBaseFakeDb
+{
+    public static data = [
+        {
+            'title'           : 'Your Account',
+            'path'            : '/pages/knowledge-base',
+            'articlesCount'   : 17,
+            'featuredArticles': [
+                {
+                    'title'  : 'Account limits',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'How do I change my username?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'How do I change my password?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'How do I change my email address?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'How do I close my account?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                }
+            ]
+        },
+        {
+            'title'           : 'Selling',
+            'path'            : '/pages/knowledge-base',
+            'articlesCount'   : 12,
+            'featuredArticles': [
+                {
+                    'title'  : 'A guide to the upload process',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Author collaboration',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Exclusivity policy',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Promises you make as an author',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'An author’s introduction',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                }
+            ]
+        },
+        {
+            'title'           : 'Buying',
+            'path'            : '/pages/knowledge-base',
+            'articlesCount'   : 19,
+            'featuredArticles': [
+                {
+                    'title'  : 'Where is my purchase code?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Can I get a refund?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Contact us',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'How do I purchase an item?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'I\'m trying to find a specific item',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                }
+            ]
+        },
+        {
+            'title'           : 'Item Support',
+            'path'            : '/pages/knowledge-base',
+            'articlesCount'   : 24,
+            'featuredArticles': [
+                {
+                    'title'  : 'What is Item Support?',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'How to contact an author',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Rating or review removal policy',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Purchasing unsupported items',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                },
+                {
+                    'title'  : 'Item installation guide',
+                    'content': '<p><b>The standard Lorem Ipsum passage, used since the 1500s</b></p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n<p><b>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</b></p>\n<p>Sed ut perspiciatis unde omnis iste natus error sit\n    voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et\n    quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit\n    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt\n    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam\n    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui\n    in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n    pariatur?\n</p>\n<p><b>1914 translation by H. Rackham</b></p>\n<p>\n    But I must explain to you how all this mistaken idea of denouncing pleasure\n    and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of\n    the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure\n    itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter\n    consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of\n    itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some\n    great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain\n    some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no\n    annoying consequences, or one who avoids a pain that produces no resultant pleasure?\n</p>\n'
+                }
+            ]
+        }
+    ];
+}
diff --git a/src/app/main/content/pages/faq/faq.module.ts b/src/app/main/content/pages/faq/faq.module.ts
index b4aa1970..127eeeb2 100644
--- a/src/app/main/content/pages/faq/faq.module.ts
+++ b/src/app/main/content/pages/faq/faq.module.ts
@@ -9,7 +9,7 @@ const routes = [
         path     : 'pages/faq',
         component: FuseFaqComponent,
         resolve  : {
-            search: FaqService
+            faq: FaqService
         }
     }
 ];

From 3fc510469d00de0be0a667be0b73b3966bc2a23a Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 25 Oct 2017 13:09:35 +0300
Subject: [PATCH 10/11] New: Knowledge base page design

---
 .../dialogs/article/article.component.html    | 20 +++++
 .../dialogs/article/article.component.scss    | 13 ++++
 .../dialogs/article/article.component.ts      | 20 +++++
 .../knowledge-base.component.html             | 40 ++++++++++
 .../knowledge-base.component.scss             | 77 +++++++++++++++++++
 .../knowledge-base.component.ts               | 47 +++++++++++
 .../knowledge-base/knowledge-base.module.ts   | 36 +++++++++
 .../knowledge-base/knowledge-base.service.ts  | 52 +++++++++++++
 src/app/main/content/pages/pages.module.ts    |  6 +-
 src/app/navigation.model.ts                   |  6 ++
 10 files changed, 316 insertions(+), 1 deletion(-)
 create mode 100644 src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
 create mode 100644 src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss
 create mode 100644 src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts
 create mode 100644 src/app/main/content/pages/knowledge-base/knowledge-base.component.html
 create mode 100644 src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
 create mode 100644 src/app/main/content/pages/knowledge-base/knowledge-base.component.ts
 create mode 100644 src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
 create mode 100644 src/app/main/content/pages/knowledge-base/knowledge-base.service.ts

diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
new file mode 100644
index 00000000..e276fbd2
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
@@ -0,0 +1,20 @@
+<div class="dialog-content-wrapper">
+
+    <mat-toolbar matDialogTitle class="mat-accent m-0">
+        <span class="title dialog-title">{{data.article.title}}</span>
+    </mat-toolbar>
+
+    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+        <div [innerHTML]="data.article.content"></div>
+    </div>
+
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
+        <button mat-button
+                (click)="dialogRef.close()"
+                class="mat-accent"
+                aria-label="Close">
+            CLOSE
+        </button>
+    </div>
+
+</div>
diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss
new file mode 100644
index 00000000..dad7b077
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss
@@ -0,0 +1,13 @@
+.knowledgebase-article-dialog {
+
+    .mat-dialog-container {
+        padding: 0;
+        width: 720px;
+    }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
+}
diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts
new file mode 100644
index 00000000..0808a977
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts
@@ -0,0 +1,20 @@
+import { Component, ViewEncapsulation, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+    selector     : 'fuse-knowledge-base-article',
+    templateUrl  : './article.component.html',
+    styleUrls    : ['./article.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseKnowledgeBaseArticleComponent
+{
+    article: any;
+
+    constructor(
+        public dialogRef: MatDialogRef<FuseKnowledgeBaseArticleComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any
+    )
+    {
+    }
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.html b/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
new file mode 100644
index 00000000..ade919a6
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
@@ -0,0 +1,40 @@
+<div id="knowledgebase" class="page-layout simple" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
+
+        <div class="hero-text mb-32">
+            <h1>How can we help?</h1>
+            <h3>Welcome to our knowledge base</h3>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <div fxLayout="row" fxLayoutAlign="center" fxLayoutWrap>
+
+            <mat-nav-list class="articles-list mat-white-bg mat-elevation-z4" *ngFor="let category of knowledgeBase">
+
+                <h3 mat-subheader>{{category.title}}</h3>
+
+                <a mat-list-item *ngFor="let article of category.featuredArticles"
+                   (click)="readArticle(article)">
+                    <mat-icon class="mr-8">note</mat-icon>
+                    {{ article.title }}
+                </a>
+
+                <a mat-list-item class="see-all-link accent-fg" [routerLink]="category.path">
+                    See all articles ({{category.articlesCount}})
+                </a>
+
+            </mat-nav-list>
+
+        </div>
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss b/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
new file mode 100644
index 00000000..6c087583
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
@@ -0,0 +1,77 @@
+@import "../../../../core/scss/fuse";
+
+#knowledgebase {
+
+    .header {
+        flex: 1 0 auto;
+        height: 280px;
+        max-height: 280px;
+        background: #1A237E;
+        background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+
+        @include media-breakpoint('xs') {
+            height: 240px;
+            padding: 16px;
+        }
+
+        .hero-text {
+
+            h1 {
+                color: white;
+                font-size: 48px;
+                font-weight: 300;
+                letter-spacing: 0.01em;
+                text-align: center;
+                margin-top: 0;
+                margin-bottom: 16px;
+
+                @include media-breakpoint-down('xs') {
+                    font-size: 24px;
+                }
+            }
+
+            h3 {
+                color: rgba(255, 255, 255, 0.75);
+                max-width: 480px;
+                text-align: center;
+                font-weight: 300;
+                letter-spacing: 0.03em;
+                margin: 0;
+
+                @include media-breakpoint-down('xs') {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    .content {
+        max-width: 960px;
+        width: 100%;
+        margin: 0 auto;
+
+        .articles-list {
+            width: 400px;
+            min-width: 400px;
+            margin: 16px;
+            padding: 16px;
+
+            @include media-breakpoint-down('xs') {
+                min-width: 300px;
+                margin: 16px 0;
+            }
+
+            .mat-list-item {
+                text-decoration: none !important;
+
+                .mat-list-item-content {
+
+                }
+            }
+
+            .see-all-link {
+                font-size: 14px;
+            }
+        }
+    }
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts
new file mode 100644
index 00000000..62c9b822
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+import { KnowledgeBaseService } from './knowledge-base.service';
+import { MatDialog } from '@angular/material';
+import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component';
+
+@Component({
+    selector     : 'fuse-knowledge-base',
+    templateUrl  : './knowledge-base.component.html',
+    styleUrls    : ['./knowledge-base.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseKnowledgeBaseComponent implements OnInit, OnDestroy
+{
+    knowledgeBase: any;
+    onKnowledgeBaseChanged: Subscription;
+
+    constructor(
+        private knowledgeBaseService: KnowledgeBaseService,
+        private matDialog: MatDialog
+    )
+    {
+
+    }
+
+    ngOnInit()
+    {
+        this.onKnowledgeBaseChanged =
+            this.knowledgeBaseService.onKnowledgeBaseChanged
+                .subscribe(response => {
+                    this.knowledgeBase = response;
+                });
+    }
+
+    ngOnDestroy()
+    {
+        this.onKnowledgeBaseChanged.unsubscribe();
+    }
+
+    readArticle(article)
+    {
+        this.matDialog.open(FuseKnowledgeBaseArticleComponent, {
+            panelClass: 'knowledgebase-article-dialog',
+            data : {article: article}
+        });
+    }
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
new file mode 100644
index 00000000..a891cb47
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { KnowledgeBaseService } from './knowledge-base.service';
+import { FuseKnowledgeBaseComponent } from './knowledge-base.component';
+import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component';
+
+const routes = [
+    {
+        path     : 'pages/knowledge-base',
+        component: FuseKnowledgeBaseComponent,
+        resolve  : {
+            knowledgeBase: KnowledgeBaseService
+        }
+    }
+];
+
+@NgModule({
+    declarations   : [
+        FuseKnowledgeBaseComponent,
+        FuseKnowledgeBaseArticleComponent
+    ],
+    imports        : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    providers      : [
+        KnowledgeBaseService
+    ],
+    entryComponents: [
+        FuseKnowledgeBaseArticleComponent
+    ]
+})
+export class FuseKnowledgeBaseModule
+{
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts
new file mode 100644
index 00000000..845356a6
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class KnowledgeBaseService implements Resolve<any>
+{
+    knowledgeBase: any;
+    onKnowledgeBaseChanged: BehaviorSubject<any> = new BehaviorSubject({});
+
+    constructor(private http: HttpClient)
+    {
+    }
+
+    /**
+     * Resolve
+     * @param {ActivatedRouteSnapshot} route
+     * @param {RouterStateSnapshot} state
+     * @returns {Observable<any> | Promise<any> | any}
+     */
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+        return new Promise((resolve, reject) => {
+            Promise.all([
+                this.getKnowledgeBase()
+            ]).then(
+                () => {
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    /**
+     * Get knowledge base
+     */
+    getKnowledgeBase(): Promise<any[]>
+    {
+        return new Promise((resolve, reject) => {
+
+            this.http.get('api/knowledge-base')
+                .subscribe((response: any) => {
+                    this.knowledgeBase = response;
+                    this.onKnowledgeBaseChanged.next(this.knowledgeBase);
+                    resolve(this.knowledgeBase);
+                }, reject);
+        });
+    }
+}
diff --git a/src/app/main/content/pages/pages.module.ts b/src/app/main/content/pages/pages.module.ts
index f22a58e9..17d17e1b 100644
--- a/src/app/main/content/pages/pages.module.ts
+++ b/src/app/main/content/pages/pages.module.ts
@@ -20,6 +20,7 @@ import { PricingModule } from './pricing/pricing.module';
 import { ProfileModule } from './profile/profile.module';
 import { SearchModule } from './search/search.module';
 import { FaqModule } from './faq/faq.module';
+import { FuseKnowledgeBaseModule } from './knowledge-base/knowledge-base.module';
 
 @NgModule({
     imports: [
@@ -59,7 +60,10 @@ import { FaqModule } from './faq/faq.module';
         SearchModule,
 
         // Faq
-        FaqModule
+        FaqModule,
+
+        // Knowledge base
+        FuseKnowledgeBaseModule
     ]
 })
 export class PagesModule
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 727d44e2..ca4fca3c 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -264,6 +264,12 @@ export class NavigationModel
                         'type' : 'item',
                         'icon' : 'help',
                         'url'  : '/pages/faq'
+                    },
+                    {
+                        'title': 'Knowledge Base',
+                        'type' : 'item',
+                        'icon' : 'import_contacts',
+                        'url'  : '/pages/knowledge-base'
                     }
                 ]
             },

From 7b10b2ad860ade98b843ed9a6a3c1b53915109ed Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 27 Oct 2017 11:45:11 +0300
Subject: [PATCH 11/11] Added docs about vertical navigation default folded
 status

---
 .../navigation/navigation.component.html        | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/content/components/navigation/navigation.component.html
index cbb42e13..ab0ccd47 100644
--- a/src/app/main/content/components/navigation/navigation.component.html
+++ b/src/app/main/content/components/navigation/navigation.component.html
@@ -101,6 +101,23 @@
             </p>
         </div>
 
+        <div class="my-48">
+
+            <h2>Vertical Navigation Default Folded Status</h2>
+
+            <p>
+                It's possible to change the default folded status of the navigation.
+            </p>
+            <p>
+                Edit the <code>main.component.html</code> file and look for the <code>[folded]</code> attribute on
+                <code>fuse-navbar-vertical</code> components.
+            </p>
+            <p>
+                Assigning <code>true</code> to that attribute will make the vertical navigation folded by default.
+            </p>
+
+        </div>
+
         <div class="my-48">
 
             <h2>Examples</h2>