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] 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'
                                     }
                                 ]
                             },