(Page Layouts) Removed mat-sidenav from page layouts, now all Fuse page layouts uses Fuse Sidebar

src/@fuse/components/demo/demo-sidebar/demo-sidebar.component.html

@@ -1,99 +1,99 @@
-<div class="demo-sidenav">
+<div class="demo-sidebar">
     <mat-list>
-        <h3 matSubheader>Sidenav Demo</h3>
+        <h3 matSubheader>Sidebar Demo</h3>
 
         <mat-list-item>
-            <span>Sidenav Item 1</span>
+            <span>Sidebar Item 1</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 2</span>
+            <span>Sidebar Item 2</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 3</span>
+            <span>Sidebar Item 3</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 4</span>
+            <span>Sidebar Item 4</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 5</span>
+            <span>Sidebar Item 5</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 6</span>
+            <span>Sidebar Item 6</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 7</span>
+            <span>Sidebar Item 7</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 8</span>
+            <span>Sidebar Item 8</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 9</span>
+            <span>Sidebar Item 9</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 10</span>
+            <span>Sidebar Item 10</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 11</span>
+            <span>Sidebar Item 11</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 12</span>
+            <span>Sidebar Item 12</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 13</span>
+            <span>Sidebar Item 13</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 14</span>
+            <span>Sidebar Item 14</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 15</span>
+            <span>Sidebar Item 15</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 16</span>
+            <span>Sidebar Item 16</span>
         </mat-list-item>
 
     </mat-list>

src/@fuse/components/demo/demo-sidebar/demo-sidebar.component.ts

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

src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts

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

src/@fuse/components/demo/demo.module.ts

@@ -4,12 +4,12 @@ import { RouterModule } from '@angular/router';
 import { MatDividerModule, MatListModule } from '@angular/material';
 
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
-import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
+import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';
 
 @NgModule({
     declarations: [
         FuseDemoContentComponent,
-        FuseDemoSidenavComponent
+        FuseDemoSidebarComponent
     ],
     imports     : [
         RouterModule,
@@ -19,7 +19,7 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
     ],
     exports     : [
         FuseDemoContentComponent,
-        FuseDemoSidenavComponent
+        FuseDemoSidebarComponent
     ]
 })
 export class FuseDemoModule

src/@fuse/scss/partials/_page-layouts.scss

@@ -153,112 +153,116 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             }
         }
 
-        // Left sidenav - Right sidenav
+        // Left / Right sidebar
-        &.left-sidenav,
+        &.left-sidebar,
-        &.right-sidenav {
+        &.right-sidebar {
+            flex-direction: row;
 
-            > mat-sidenav-container {
+            // Sidebar
+            > .sidebar {
                 display: flex;
+                flex-direction: column;
                 flex: 1 1 auto;
-                background: none;
+                width: 240px;
-                z-index: 2;
+                min-width: 240px;
-                width: 100%;
+                max-width: 240px;
+                height: auto;
+                z-index: 4;
+                overflow-y: hidden;
+                @include mat-elevation(7);
 
-                .sidenav {
+                &.locked-open {
+                    background: none;
+                    box-shadow: none;
+
+                    + .center {
+                        z-index: 5;
+                    }
+
+                    &.left-positioned {
+
+                        + .center {
+                            margin-left: 0;
+                        }
+                    }
+
+                    &.right-positioned {
+
+                        + .center {
+                            margin-right: 0;
+                        }
+                    }
+                }
+
+                .header {
+                    height: $carded-header-height;
+                    min-height: $carded-header-height;
+                    max-height: $carded-header-height;
+
+                    @include media-breakpoint-down('sm') {
+                        height: $carded-header-height-sm;
+                        min-height: $carded-header-height-sm;
+                        max-height: $carded-header-height-sm;
+                    }
+                }
+
+                .content {
+                    background: transparent;
+                    overflow: auto;
+                }
+            }
+
+            // Center
+            > .center {
+                display: flex;
+                flex-direction: column;
+                flex: 1 1 auto;
+                position: relative;
+                z-index: 3;
+                margin-left: 32px;
+                margin-right: 32px;
+
+                .header {
+                    display: flex;
+                    height: $carded-header-height-without-toolbar;
+                    min-height: $carded-header-height-without-toolbar;
+                    max-height: $carded-header-height-without-toolbar;
+
+                    @include media-breakpoint-down('sm') {
+                        height: $carded-header-height-without-toolbar-sm;
+                        min-height: $carded-header-height-without-toolbar-sm;
+                        max-height: $carded-header-height-without-toolbar-sm;
+                    }
+                }
+
+                .content-card {
                     display: flex;
                     flex-direction: column;
                     flex: 1 1 auto;
-                    width: 240px;
+                    overflow: hidden;
-                    min-width: 240px;
-                    max-width: 240px;
-                    height: auto;
-                    z-index: 4;
-                    overflow-y: hidden;
                     @include mat-elevation(7);
 
-                    &.mat-is-locked-open {
+                    .toolbar {
-                        background: none;
+                        display: flex;
-                        box-shadow: none;
+                        justify-content: flex-start;
-                    }
+                        align-items: center;
+                        flex: 1 1 auto;
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                        height: $carded-toolbar-height;
+                        min-height: $carded-toolbar-height;
+                        max-height: $carded-toolbar-height;
 
-                    .header {
+                        .sidebar-toggle {
-                        height: $carded-header-height;
+                            margin: 0 8px 0 0 !important;
-                        min-height: $carded-header-height;
+                            padding: 0 !important;
-                        max-height: $carded-header-height;
+                            border-radius: 0;
-
-                        @include media-breakpoint-down('sm') {
-                            height: $carded-header-height-sm;
-                            min-height: $carded-header-height-sm;
-                            max-height: $carded-header-height-sm;
                         }
                     }
 
                     .content {
-                        background: transparent;
-                        overflow: auto;
-                    }
-                }
-
-                > .mat-sidenav-content,
-                > .mat-drawer-content {
-                    display: flex;
-                    flex: 1 1 auto;
-                    height: auto;
-                    overflow: visible;
-
-                    // Center
-                    .center {
                         display: flex;
-                        flex-direction: column;
                         flex: 1 1 auto;
-                        position: relative;
+                        overflow: auto;
-                        z-index: 3;
-                        margin-left: 32px;
-                        margin-right: 32px;
-
-                        .header {
-                            display: flex;
-                            height: $carded-header-height-without-toolbar;
-                            min-height: $carded-header-height-without-toolbar;
-                            max-height: $carded-header-height-without-toolbar;
-
-                            @include media-breakpoint-down('sm') {
-                                height: $carded-header-height-without-toolbar-sm;
-                                min-height: $carded-header-height-without-toolbar-sm;
-                                max-height: $carded-header-height-without-toolbar-sm;
-                            }
-                        }
-
-                        .content-card {
-                            display: flex;
-                            flex-direction: column;
-                            flex: 1 1 auto;
-                            overflow: hidden;
-                            @include mat-elevation(7);
-
-                            .toolbar {
-                                display: flex;
-                                justify-content: flex-start;
-                                align-items: center;
-                                flex: 1 1 auto;
-                                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-                                height: $carded-toolbar-height;
-                                min-height: $carded-toolbar-height;
-                                max-height: $carded-toolbar-height;
-
-                                .sidenav-toggle {
-                                    margin: 0 8px 0 0 !important;
-                                    padding: 0 !important;
-                                    border-radius: 0;
-                                }
-                            }
-
-                            .content {
-                                display: flex;
-                                flex: 1 1 auto;
-                                overflow: auto;
-                            }
-                        }
                     }
                 }
             }
@@ -267,21 +271,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             &.inner-scroll {
                 flex: 1 1 auto;
 
-                > mat-sidenav-container {
+                > .center {
+                    flex: 1 1 auto;
 
-                    > .mat-sidenav-content,
+                    .content-card {
-                    > .mat-drawer-content {
+                        flex: 1 1 auto;
 
-                        > .center {
+                        > .content {
                             flex: 1 1 auto;
-
-                            .content-card {
-                                flex: 1 1 auto;
-
-                                > .content {
-                                    flex: 1 1 auto;
-                                }
-                            }
                         }
                     }
                 }
@@ -290,52 +287,43 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             // Tabbed
             &.tabbed {
 
-                > mat-sidenav-container {
+                > .center {
+                    width: calc(100% - 32px);
+                    min-width: 0;
 
-                    > .mat-sidenav-content,
+                    @include media-breakpoint-down('md') {
-                    > .mat-drawer-content {
+                        width: calc(100% - 64px);
-                        width: calc(100% - 240px);
+                    }
-                        min-width: 0;
 
-                        .center {
+                    .header {
-                            width: calc(100% - 32px);
+                        flex: 1 1 auto;
-                            min-width: 0;
+                    }
 
-                            @include media-breakpoint-down('md') {
+                    .content-card {
-                                width: calc(100% - 64px);
-                            }
 
-                            .header {
+                        .content {
-                                flex: 1 1 auto;
-                            }
 
-                            .content-card {
+                            .mat-tab-group {
+                                overflow: hidden;
 
-                                .content {
+                                .mat-tab-header {
 
-                                    .mat-tab-group {
+                                    .mat-tab-label {
+                                        height: 64px;
+                                    }
+                                }
+
+                                .mat-tab-body {
+                                    overflow: hidden;
+
+                                    .mat-tab-body-content {
                                         overflow: hidden;
 
-                                        .mat-tab-header {
+                                        .tab-content {
-
+                                            position: relative;
-                                            .mat-tab-label {
+                                            width: 100%;
-                                                height: 64px;
+                                            height: 100%;
-                                            }
+                                            overflow: auto;
-                                        }
-
-                                        .mat-tab-body {
-                                            overflow: hidden;
-
-                                            .mat-tab-body-content {
-                                                overflow: hidden;
-
-                                                .tab-content {
-                                                    position: relative;
-                                                    width: 100%;
-                                                    height: 100%;
-                                                    overflow: auto;
-                                                }
-                                            }
                                         }
                                     }
                                 }
@@ -346,48 +334,15 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             }
         }
 
-        // Left sidenav
+        // Right sidebar specific
-        &.left-sidenav {
+        &.right-sidebar {
 
-            // Sidenav
+            > .sidebar {
-            > mat-sidenav-container {
+                order: 2;
-
-                .sidenav {
-
-                    &.mat-is-locked-open {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
-
-                            .center {
-                                margin-left: 0;
-                            }
-                        }
-                    }
-                }
             }
-        }
 
-        // Right sidenav
+            > .center {
-        &.right-sidenav {
+                order: 1;
-
-            // Sidenav
-            > mat-sidenav-container {
-
-                .sidenav {
-                    order: 999;
-
-                    &.mat-is-locked-open {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
-
-                            .center {
-                                margin-right: 0;
-                            }
-                        }
-                    }
-                }
             }
         }
     }
@@ -403,11 +358,16 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         // Fullwidth
         &.fullwidth {
             overflow: auto;
+
+            > .content {
+                display: flex;
+                flex: 1 1 auto;
+            }
         }
 
         &.fullwidth,
-        &.inner-sidenav {
+        &.inner-sidebar {
-            min-height: 100%;
+            //min-height: 100%;
 
             > .header {
                 height: $header-height;
@@ -416,107 +376,113 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             }
         }
 
-        // Left sidenav - Right sidenav
+        // Left / Right sidebar
-        &.left-sidenav,
+        &.left-sidebar,
-        &.right-sidenav {
+        &.right-sidebar {
+            flex-direction: row;
 
-            // Single scroll
+            // Sidebar
-            /*&.single-scroll {
+            > .sidebar {
+                width: 240px;
+                min-width: 240px;
+                max-width: 240px;
+                z-index: 4;
+                @include mat-elevation(7);
 
-                > mat-sidenav-container {
+                &.locked-open {
-                    flex: 1 0 auto;
+                    background: none;
+                    box-shadow: none;
 
-                    > .mat-sidenav-content,
+                    + .center {
-                    > .mat-drawer-content {
+                        z-index: 5;
-                        flex: 1 0 auto;
-                        max-height: none;
                     }
-                }
-            }*/
 
-            // Inner Sidenav
+                    &.left-positioned {
-            &.inner-sidenav {
 
-                > mat-sidenav-container {
+                        + .center {
-                    flex: 1 1 auto;
+                            margin-left: 0;
-
-                    .sidenav {
-
-                        .sidenav-content {
-                            height: 100%;
                         }
                     }
 
-                    > .mat-sidenav-content,
+                    &.right-positioned {
-                    > .mat-drawer-content {
-                        display: flex;
-                        height: auto;
 
-                        .center {
+                        + .center {
-                            flex: 1 1 auto;
+                            margin-right: 0;
-                            min-height: 100%;
-                            @include mat-elevation(0);
-
-                            .content {
-                                display: flex;
-                                flex: 1 0 auto;
-                            }
                         }
                     }
                 }
             }
 
-            > mat-sidenav-container {
+            // Center
+            > .center {
+                position: relative;
                 display: flex;
                 flex-direction: column;
                 flex: 1 1 auto;
-                background: none;
+                overflow: auto;
-                z-index: 2;
+                z-index: 3;
-                width: 100%;
+                @include mat-elevation(7);
 
-                .sidenav {
+                .header {
-                    width: 240px;
+                    height: $header-height;
-                    min-width: 240px;
+                    min-height: $header-height;
-                    max-width: 240px;
+                    max-height: $header-height;
-                    z-index: 51;
-                    @include mat-elevation(7);
-
-                    &.mat-is-locked-open {
-                        width: 220px;
-                        min-width: 220px;
-                        max-width: 220px;
-                        box-shadow: none;
-                        background: transparent;
-                    }
-
-                    .sidenav-content {
-                        height: 100%;
-                    }
                 }
 
-                > .mat-sidenav-content,
+                .content {
-                > .mat-drawer-content {
                     display: flex;
-                    flex: 1 1 auto;
+                    flex: 1 0 auto;
-                    height: auto;
+                }
-                    overflow: visible;
+            }
-                    max-height: 100%;
 
-                    .header {
+            // Inner Sidebar
-                        height: $header-height;
+            &.inner-sidebar {
-                        min-height: $header-height;
+                flex-direction: column;
-                        max-height: $header-height;
+                overflow: hidden;
+                height: 100%;
+
+                > .content {
+                    display: flex;
+
+                    > .sidebar {
+                        background: none;
+                        box-shadow: none;
+                    }
+                }
+            }
+
+            // Inner scroll
+            &.inner-scroll {
+                flex: 1 1 auto;
+
+                > .center {
+                    flex: 1 1 auto;
+                }
+            }
+        }
+
+        // Right sidebar specific
+        &.right-sidebar {
+
+            > .sidebar {
+                order: 2;
+            }
+
+            > .center {
+                order: 1;
+            }
+
+            // Inner sidebar
+            &.inner-sidebar {
+
+                > .content {
+
+                    > .sidebar {
+                        order: 2;
                     }
 
-                    .center {
+                    > .center {
-                        display: flex;
+                        order: 1;
-                        flex-direction: column;
-                        flex: 1 1 auto;
-                        overflow: auto;
-                        @include mat-elevation(7);
-
-                        .content {
-                        }
                     }
                 }
             }

src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html

@@ -9,7 +9,7 @@
 
         <!-- CONTENT HEADER -->
         <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-            <h2>Full width with content scroll</h2>
+            <h2 class="m-0">Full width with content scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->
 

src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html

@@ -9,7 +9,7 @@
 
         <!-- CONTENT HEADER -->
         <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-            <h2>Full width with inner scroll</h2>
+            <h2 class="m-0">Full width with inner scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->
 

src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html

@@ -9,7 +9,7 @@
 
         <!-- CONTENT HEADER -->
         <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-            <h2>Full width with tabs and content scroll</h2>
+            <h2 class="m-0">Full width with tabs and content scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->
 

src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html

@@ -9,7 +9,7 @@
 
         <!-- CONTENT HEADER -->
         <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-            <h2>Full width with tabs and inner scroll</h2>
+            <h2 class="m-0">Full width with tabs and inner scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->
 

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

@@ -0,0 +1,62 @@
+<div class="page-layout carded left-sidebar">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-left-sidebar-1" position="left" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24">
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+            <h2 class="m-0">Left sidebar with content scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card mat-white-bg">
+
+            <!-- CONTENT TOOLBAR -->
+            <div class="toolbar px-24 py-8">
+
+                <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
+                        (click)="toggleSidebar('carded-left-sidebar-1')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <span>Content toolbar</span>
+
+            </div>
+            <!-- / CONTENT TOOLBAR -->
+
+            <!-- CONTENT -->
+            <div class="content p-24">
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

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

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-left-sidebar-1',
+    templateUrl: './left-sidebar-1.component.html',
+    styleUrls  : ['./left-sidebar-1.component.scss']
+})
+export class CardedLeftSidebar1Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -0,0 +1,62 @@
+<div class="page-layout carded left-sidebar inner-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-left-sidebar-2" position="left" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24" fusePerfectScrollbar>
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+            <h2 class="m-0">Left sidebar with inner scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card mat-white-bg">
+
+            <!-- CONTENT TOOLBAR -->
+            <div class="toolbar px-24 py-8">
+
+                <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
+                        (click)="toggleSidebar('carded-left-sidebar-2')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <span>Content toolbar</span>
+
+            </div>
+            <!-- / CONTENT TOOLBAR -->
+
+            <!-- CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

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

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-left-sidebar-2',
+    templateUrl: './left-sidebar-2.component.html',
+    styleUrls  : ['./left-sidebar-2.component.scss']
+})
+export class CardedLeftSidebar2Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component.html

@@ -0,0 +1,144 @@
+<div class="page-layout carded left-sidebar tabbed">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-left-sidebar-tabbed-1" position="left" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24">
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+
+            <div fxLayout="row" fxLayoutAlign="start start">
+
+                <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                        (click)="toggleSidebar('carded-left-sidebar-tabbed-1')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <h2 class="m-0">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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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 -->
+
+</div>

src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-left-sidebar-tabbed-1',
+    templateUrl: './left-sidebar-tabbed-1.component.html',
+    styleUrls  : ['./left-sidebar-tabbed-1.component.scss']
+})
+export class CardedLeftSidebarTabbed1Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -0,0 +1,144 @@
+<div class="page-layout carded left-sidebar tabbed inner-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-left-sidebar-tabbed-2" position="left" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24" fusePerfectScrollbar>
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+
+            <div fxLayout="row" fxLayoutAlign="start start">
+
+                <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                        (click)="toggleSidebar('carded-left-sidebar-tabbed-2')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <h2 class="m-0">Left sidenav with tabs and inner 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 -->
+
+</div>

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

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-left-sidebar-tabbed-2',
+    templateUrl: './left-sidebar-tabbed-2.component.html',
+    styleUrls  : ['./left-sidebar-tabbed-2.component.scss']
+})
+export class CardedLeftSidebarTabbed2Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -1,70 +0,0 @@
-<div class="page-layout carded left-sidenav">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="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">
-                <h2>Sidenav header</h2>
-            </div>
-            <!-- / SIDENAV HEADER -->
-
-            <!-- SIDENAV CONTENT -->
-            <div class="content p-24">
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-            <!-- / SIDENAV CONTENT -->
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-        <!-- CENTER -->
-        <div class="center">
-
-            <!-- CONTENT HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <h2>Left sidenav with content scroll</h2>
-            </div>
-            <!-- / CONTENT HEADER -->
-
-            <!-- CONTENT CARD -->
-            <div class="content-card mat-white-bg">
-
-                <!-- CONTENT TOOLBAR -->
-                <div class="toolbar px-24 py-8">
-                    <button mat-icon-button class="sidenav-toggle"
-                            fuseMatSidenavToggler="carded-left-sidenav"
-                            fxHide.gt-md>
-                        <mat-icon>menu</mat-icon>
-                    </button>
-
-                    <span>Content toolbar</span>
-                </div>
-                <!-- / CONTENT TOOLBAR -->
-
-                <!-- CONTENT -->
-                <div class="content p-24">
-
-                    <fuse-demo-content></fuse-demo-content>
-
-                </div>
-                <!-- / CONTENT -->
-
-            </div>
-            <!-- / CONTENT CARD -->
-
-        </div>
-        <!-- / CENTER -->
-
-    </mat-sidenav-container>
-
-</div>

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

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

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

@@ -1,70 +0,0 @@
-<div class="page-layout carded left-sidenav inner-scroll">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
-                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
-
-            <!-- SIDENAV HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <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 mat-accent-bg p-24">
-                <h2>Left sidenav with inner scroll</h2>
-            </div>
-            <!-- / CONTENT HEADER -->
-
-            <!-- CONTENT CARD -->
-            <div class="content-card mat-white-bg">
-
-                <!-- CONTENT TOOLBAR -->
-                <div class="toolbar px-24 py-8">
-                    <button mat-icon-button class="sidenav-toggle"
-                            fuseMatSidenavToggler="carded-left-sidenav"
-                            fxHide.gt-md>
-                        <mat-icon>menu</mat-icon>
-                    </button>
-
-                    <span>Content toolbar</span>
-                </div>
-                <!-- / CONTENT TOOLBAR -->
-
-                <!-- CONTENT -->
-                <div class="content p-24" fusePerfectScrollbar>
-
-                    <fuse-demo-content></fuse-demo-content>
-
-                </div>
-                <!-- / CONTENT -->
-
-            </div>
-            <!-- / CONTENT CARD -->
-
-        </div>
-        <!-- / CENTER -->
-
-    </mat-sidenav-container>
-
-</div>

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

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

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

@@ -1,151 +0,0 @@
-<div class="page-layout carded left-sidenav tabbed">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
-                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
-
-            <!-- SIDENAV HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <h2>Sidenav header</h2>
-            </div>
-            <!-- / SIDENAV HEADER -->
-
-            <!-- SIDENAV CONTENT -->
-            <div class="content p-24">
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-            <!-- / SIDENAV CONTENT -->
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-        <!-- CENTER -->
-        <div class="center">
-
-            <!-- CONTENT HEADER -->
-            <div class="header mat-accent-bg p-24">
-
-                <div fxLayout="row" fxLayoutAlign="start center">
-
-                    <button mat-icon-button class="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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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>

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

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'carded-left-sidenav-tabbed-1',
-    templateUrl: './left-sidenav-tabbed-1.component.html',
-    styleUrls  : ['./left-sidenav-tabbed-1.component.scss']
-})
-export class CardedLeftSidenavTabbed1Component
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}

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

@@ -1,151 +0,0 @@
-<div class="page-layout carded left-sidenav tabbed inner-scroll">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
-                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
-
-            <!-- SIDENAV HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <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 mat-accent-bg p-24">
-
-                <div fxLayout="row" fxLayoutAlign="start center">
-
-                    <button mat-icon-button class="sidenav-toggle mr-8"
-                            fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
-                        <mat-icon>menu</mat-icon>
-                    </button>
-
-                    <h2>Left sidenav with tabs and inner 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>

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

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

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

@@ -0,0 +1,62 @@
+<div class="page-layout carded right-sidebar">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-right-sidebar-1" position="right" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24">
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+            <h2 class="m-0">Right sidebar with content scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card mat-white-bg">
+
+            <!-- CONTENT TOOLBAR -->
+            <div class="toolbar px-24 py-8">
+
+                <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
+                        (click)="toggleSidebar('carded-right-sidebar-1')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <span>Content toolbar</span>
+
+            </div>
+            <!-- / CONTENT TOOLBAR -->
+
+            <!-- CONTENT -->
+            <div class="content p-24">
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

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

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-right-sidebar-1',
+    templateUrl: './right-sidebar-1.component.html',
+    styleUrls  : ['./right-sidebar-1.component.scss']
+})
+export class CardedRightSidebar1Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -0,0 +1,62 @@
+<div class="page-layout carded right-sidebar inner-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-right-sidebar-2" position="right" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24" fusePerfectScrollbar>
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+            <h2 class="m-0">Right sidebar with inner scroll</h2>
+        </div>
+        <!-- / CONTENT HEADER -->
+
+        <!-- CONTENT CARD -->
+        <div class="content-card mat-white-bg">
+
+            <!-- CONTENT TOOLBAR -->
+            <div class="toolbar px-24 py-8">
+
+                <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
+                        (click)="toggleSidebar('carded-right-sidebar-2')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <span>Content toolbar</span>
+
+            </div>
+            <!-- / CONTENT TOOLBAR -->
+
+            <!-- CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CONTENT CARD -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

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

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-right-sidebar-2',
+    templateUrl: './right-sidebar-2.component.html',
+    styleUrls  : ['./right-sidebar-2.component.scss']
+})
+export class CardedRightSidebar2Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component.html

@@ -0,0 +1,144 @@
+<div class="page-layout carded right-sidebar tabbed">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-right-sidebar-tabbed-1" position="right" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24">
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+
+            <div fxLayout="row" fxLayoutAlign="start start">
+
+                <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                        (click)="toggleSidebar('carded-right-sidebar-tabbed-1')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <h2 class="m-0">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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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">
+                            <!-- 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 -->
+
+</div>

src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-right-sidebar-tabbed-1',
+    templateUrl: './right-sidebar-tabbed-1.component.html',
+    styleUrls  : ['./right-sidebar-tabbed-1.component.scss']
+})
+export class CardedRightSidebarTabbed1Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -0,0 +1,144 @@
+<div class="page-layout carded right-sidebar tabbed inner-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg mat-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="carded-right-sidebar-tabbed-2" position="right" lockedOpen="gt-md">
+
+        <!-- SIDEBAR HEADER -->
+        <div class="header p-24 mat-accent-bg">
+            <h2 class="m-0">Sidebar header</h2>
+        </div>
+        <!-- / SIDEBAR HEADER -->
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24" fusePerfectScrollbar>
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- CONTENT HEADER -->
+        <div class="header mat-accent-bg p-24">
+
+            <div fxLayout="row" fxLayoutAlign="start start">
+
+                <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                        (click)="toggleSidebar('carded-right-sidebar-tabbed-2')">
+                    <mat-icon>menu</mat-icon>
+                </button>
+
+                <h2 class="m-0">Right sidenav with tabs and inner 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 -->
+
+</div>

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

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'carded-right-sidebar-tabbed-2',
+    templateUrl: './right-sidebar-tabbed-2.component.html',
+    styleUrls  : ['./right-sidebar-tabbed-2.component.scss']
+})
+export class CardedRightSidebarTabbed2Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -1,70 +0,0 @@
-<div class="page-layout carded right-sidenav">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- CENTER -->
-        <div class="center">
-
-            <!-- CONTENT HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <h2>Right sidenav with content scroll</h2>
-            </div>
-            <!-- / CONTENT HEADER -->
-
-            <!-- CONTENT CARD -->
-            <div class="content-card mat-white-bg">
-
-                <!-- CONTENT TOOLBAR -->
-                <div class="toolbar px-24 py-8">
-                    <button mat-icon-button class="sidenav-toggle"
-                            fuseMatSidenavToggler="carded-right-sidenav"
-                            fxHide.gt-md>
-                        <mat-icon>menu</mat-icon>
-                    </button>
-
-                    <span>Content toolbar</span>
-                </div>
-                <!-- / CONTENT TOOLBAR -->
-
-                <!-- CONTENT -->
-                <div class="content p-24">
-
-                    <fuse-demo-content></fuse-demo-content>
-
-                </div>
-                <!-- / CONTENT -->
-
-            </div>
-            <!-- / CONTENT CARD -->
-
-        </div>
-        <!-- / CENTER -->
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
-                     fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
-
-            <!-- SIDENAV HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <h2>Sidenav header</h2>
-            </div>
-            <!-- / SIDENAV HEADER -->
-
-            <!-- SIDENAV CONTENT -->
-            <div class="content p-24">
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-            <!-- / SIDENAV CONTENT -->
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-    </mat-sidenav-container>
-
-</div>

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

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

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

@@ -1,70 +0,0 @@
-<div class="page-layout carded right-sidenav inner-scroll">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- CENTER -->
-        <div class="center">
-
-            <!-- CONTENT HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <h2>Right sidenav with inner scroll</h2>
-            </div>
-            <!-- / CONTENT HEADER -->
-
-            <!-- CONTENT CARD -->
-            <div class="content-card mat-white-bg">
-
-                <!-- CONTENT TOOLBAR -->
-                <div class="toolbar px-24 py-8">
-                    <button mat-icon-button class="sidenav-toggle"
-                            fuseMatSidenavToggler="carded-right-sidenav"
-                            fxHide.gt-md>
-                        <mat-icon>menu</mat-icon>
-                    </button>
-
-                    <span>Content toolbar</span>
-                </div>
-                <!-- / CONTENT TOOLBAR -->
-
-                <!-- CONTENT -->
-                <div class="content p-24" fusePerfectScrollbar>
-
-                    <fuse-demo-content></fuse-demo-content>
-
-                </div>
-                <!-- / CONTENT -->
-
-            </div>
-            <!-- / CONTENT CARD -->
-
-        </div>
-        <!-- / CENTER -->
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
-                     fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
-
-            <!-- SIDENAV HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <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>

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

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

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

@@ -1,151 +0,0 @@
-<div class="page-layout carded right-sidenav tabbed">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- CENTER -->
-        <div class="center">
-
-            <!-- CONTENT HEADER -->
-            <div class="header mat-accent-bg p-24">
-
-                <div fxLayout="row" fxLayoutAlign="start center">
-
-                    <button mat-icon-button class="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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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">
-                                <!-- 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" position="end" opened="true" mode="side"
-                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
-
-            <!-- SIDENAV HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <h2>Sidenav header</h2>
-            </div>
-            <!-- / SIDENAV HEADER -->
-
-            <!-- SIDENAV CONTENT -->
-            <div class="content p-24">
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-            <!-- / SIDENAV CONTENT -->
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-    </mat-sidenav-container>
-
-</div>

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

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

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

@@ -1,151 +0,0 @@
-<div class="page-layout carded right-sidenav tabbed inner-scroll">
-
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
-    <!-- / TOP BACKGROUND -->
-
-    <mat-sidenav-container>
-
-        <!-- CENTER -->
-        <div class="center">
-
-            <!-- CONTENT HEADER -->
-            <div class="header mat-accent-bg p-24">
-
-                <div fxLayout="row" fxLayoutAlign="start center">
-
-                    <button mat-icon-button class="sidenav-toggle mr-8"
-                            fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
-                        <mat-icon>menu</mat-icon>
-                    </button>
-
-                    <h2>Right sidenav with tabs and inner 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" position="end" opened="true" mode="side"
-                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
-
-            <!-- SIDENAV HEADER -->
-            <div class="header mat-accent-bg p-24">
-                <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>

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

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

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

@@ -9,24 +9,28 @@ import { CardedFullWidth1Component } from 'app/main/ui/page-layouts/carded/full-
 import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/full-width-2/full-width-2.component';
 import { CardedFullWidthTabbed1Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component';
 import { CardedFullWidthTabbed2Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component';
-import { CardedLeftSidenav1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component';
+import { CardedLeftSidebar1Component } from 'app/main/ui/page-layouts/carded/left-sidebar-1/left-sidebar-1.component';
-import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component';
+import { CardedLeftSidebar2Component } from 'app/main/ui/page-layouts/carded/left-sidebar-2/left-sidebar-2.component';
-import { CardedLeftSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component';
+import { CardedLeftSidebarTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component';
-import { CardedLeftSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component';
+import { CardedLeftSidebarTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidebar-tabbed-2/left-sidebar-tabbed-2.component';
-import { CardedRightSidenav1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component';
+import { CardedRightSidebar1Component } from 'app/main/ui/page-layouts/carded/right-sidebar-1/right-sidebar-1.component';
-import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component';
+import { CardedRightSidebar2Component } from 'app/main/ui/page-layouts/carded/right-sidebar-2/right-sidebar-2.component';
-import { CardedRightSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component';
+import { CardedRightSidebarTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component';
-import { CardedRightSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component';
+import { CardedRightSidebarTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidebar-tabbed-2/right-sidebar-tabbed-2.component';
 import { SimpleFullWidth1Component } from 'app/main/ui/page-layouts/simple/full-width-1/full-width-1.component';
-import { SimpleLeftSidenav1Component } from 'app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component';
+import { SimpleLeftSidebar1Component } from 'app/main/ui/page-layouts/simple/left-sidebar-1/left-sidebar-1.component';
-import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component';
+import { SimpleLeftSidebar2Component } from 'app/main/ui/page-layouts/simple/left-sidebar-2/left-sidebar-2.component';
-import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component';
+import { SimpleLeftSidebar3Component } from 'app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component';
-import { SimpleRightSidenav1Component } from 'app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component';
+import { SimpleLeftSidebar4Component } from 'app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component';
-import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component';
+import { SimpleRightSidebar1Component } from 'app/main/ui/page-layouts/simple/right-sidebar-1/right-sidebar-1.component';
-import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component';
+import { SimpleRightSidebar2Component } from 'app/main/ui/page-layouts/simple/right-sidebar-2/right-sidebar-2.component';
+import { SimpleRightSidebar3Component } from 'app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component';
+import { SimpleRightSidebar4Component } from 'app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component';
 import { Tabbed1Component } from 'app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component';
 import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component';
 
+import { FuseSidebarModule } from '@fuse/components';
+
 const routes: Routes = [
     {
         path     : 'page-layouts/carded/full-width-1',
@@ -45,64 +49,72 @@ const routes: Routes = [
         component: CardedFullWidthTabbed2Component
     },
     {
-        path     : 'page-layouts/carded/left-sidenav-1',
+        path     : 'page-layouts/carded/left-sidebar-1',
-        component: CardedLeftSidenav1Component
+        component: CardedLeftSidebar1Component
     },
     {
-        path     : 'page-layouts/carded/left-sidenav-tabbed-1',
+        path     : 'page-layouts/carded/left-sidebar-tabbed-1',
-        component: CardedLeftSidenavTabbed1Component
+        component: CardedLeftSidebarTabbed1Component
     },
     {
-        path     : 'page-layouts/carded/left-sidenav-2',
+        path     : 'page-layouts/carded/left-sidebar-2',
-        component: CardedLeftSidenav2Component
+        component: CardedLeftSidebar2Component
     },
     {
-        path     : 'page-layouts/carded/left-sidenav-tabbed-2',
+        path     : 'page-layouts/carded/left-sidebar-tabbed-2',
-        component: CardedLeftSidenavTabbed2Component
+        component: CardedLeftSidebarTabbed2Component
     },
     {
-        path     : 'page-layouts/carded/right-sidenav-1',
+        path     : 'page-layouts/carded/right-sidebar-1',
-        component: CardedRightSidenav1Component
+        component: CardedRightSidebar1Component
     },
     {
-        path     : 'page-layouts/carded/right-sidenav-tabbed-1',
+        path     : 'page-layouts/carded/right-sidebar-tabbed-1',
-        component: CardedRightSidenavTabbed1Component
+        component: CardedRightSidebarTabbed1Component
     },
     {
-        path     : 'page-layouts/carded/right-sidenav-2',
+        path     : 'page-layouts/carded/right-sidebar-2',
-        component: CardedRightSidenav2Component
+        component: CardedRightSidebar2Component
     },
     {
-        path     : 'page-layouts/carded/right-sidenav-tabbed-2',
+        path     : 'page-layouts/carded/right-sidebar-tabbed-2',
-        component: CardedRightSidenavTabbed2Component
+        component: CardedRightSidebarTabbed2Component
     },
     {
         path     : 'page-layouts/simple/full-width-1',
         component: SimpleFullWidth1Component
     },
     {
-        path     : 'page-layouts/simple/left-sidenav-1',
+        path     : 'page-layouts/simple/left-sidebar-1',
-        component: SimpleLeftSidenav1Component
+        component: SimpleLeftSidebar1Component
     },
     {
-        path     : 'page-layouts/simple/left-sidenav-2',
+        path     : 'page-layouts/simple/left-sidebar-2',
-        component: SimpleLeftSidenav2Component
+        component: SimpleLeftSidebar2Component
     },
     {
-        path     : 'page-layouts/simple/left-sidenav-3',
+        path     : 'page-layouts/simple/left-sidebar-3',
-        component: SimpleLeftSidenav3Component
+        component: SimpleLeftSidebar3Component
     },
     {
-        path     : 'page-layouts/simple/right-sidenav-1',
+        path     : 'page-layouts/simple/left-sidebar-4',
-        component: SimpleRightSidenav1Component
+        component: SimpleLeftSidebar4Component
     },
     {
-        path     : 'page-layouts/simple/right-sidenav-2',
+        path     : 'page-layouts/simple/right-sidebar-1',
-        component: SimpleRightSidenav2Component
+        component: SimpleRightSidebar1Component
     },
     {
-        path     : 'page-layouts/simple/right-sidenav-3',
+        path     : 'page-layouts/simple/right-sidebar-2',
-        component: SimpleRightSidenav3Component
+        component: SimpleRightSidebar2Component
+    },
+    {
+        path     : 'page-layouts/simple/right-sidebar-3',
+        component: SimpleRightSidebar3Component
+    },
+    {
+        path     : 'page-layouts/simple/right-sidebar-4',
+        component: SimpleRightSidebar4Component
     },
     {
         path     : 'page-layouts/simple/tabbed-1',
@@ -120,21 +132,23 @@ const routes: Routes = [
         CardedFullWidth2Component,
         CardedFullWidthTabbed1Component,
         CardedFullWidthTabbed2Component,
-        CardedLeftSidenav1Component,
+        CardedLeftSidebar1Component,
-        CardedLeftSidenav2Component,
+        CardedLeftSidebar2Component,
-        CardedLeftSidenavTabbed1Component,
+        CardedLeftSidebarTabbed1Component,
-        CardedLeftSidenavTabbed2Component,
+        CardedLeftSidebarTabbed2Component,
-        CardedRightSidenav1Component,
+        CardedRightSidebar1Component,
-        CardedRightSidenav2Component,
+        CardedRightSidebar2Component,
-        CardedRightSidenavTabbed1Component,
+        CardedRightSidebarTabbed1Component,
-        CardedRightSidenavTabbed2Component,
+        CardedRightSidebarTabbed2Component,
         SimpleFullWidth1Component,
-        SimpleLeftSidenav1Component,
+        SimpleLeftSidebar1Component,
-        SimpleLeftSidenav2Component,
+        SimpleLeftSidebar2Component,
-        SimpleLeftSidenav3Component,
+        SimpleLeftSidebar3Component,
-        SimpleRightSidenav1Component,
+        SimpleLeftSidebar4Component,
-        SimpleRightSidenav2Component,
+        SimpleRightSidebar1Component,
-        SimpleRightSidenav3Component,
+        SimpleRightSidebar2Component,
+        SimpleRightSidebar3Component,
+        SimpleRightSidebar4Component,
         Tabbed1Component,
         BlankComponent
     ],
@@ -146,6 +160,7 @@ const routes: Routes = [
         MatSidenavModule,
         MatTabsModule,
 
+        FuseSidebarModule,
         FuseSharedModule,
         FuseDemoModule
     ]

src/app/main/ui/page-layouts/simple/left-sidebar-1/left-sidebar-1.component.html

@@ -0,0 +1,40 @@
+<div class="page-layout simple left-sidebar">
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="simple-left-sidebar-1" position="left" lockedOpen="gt-md">
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24">
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- HEADER -->
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+            <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                    (click)="toggleSidebar('simple-left-sidebar-1')">
+                <mat-icon>menu</mat-icon>
+            </button>
+
+            <h2 class="m-0">Left sidebar with content scroll</h2>
+
+        </div>
+        <!-- / HEADER -->
+
+        <!-- CONTENT -->
+        <div class="content mat-white-bg p-24">
+            <fuse-demo-content></fuse-demo-content>
+        </div>
+        <!-- / CONTENT -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

src/app/main/ui/page-layouts/simple/left-sidebar-1/left-sidebar-1.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-left-sidebar-1',
+    templateUrl: './left-sidebar-1.component.html',
+    styleUrls  : ['./left-sidebar-1.component.scss']
+})
+export class SimpleLeftSidebar1Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

src/app/main/ui/page-layouts/simple/left-sidebar-2/left-sidebar-2.component.html

@@ -0,0 +1,40 @@
+<div class="page-layout simple left-sidebar inner-scroll">
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="simple-left-sidebar-2" position="left" lockedOpen="gt-md">
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24" fusePerfectScrollbar>
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center" fusePerfectScrollbar>
+
+        <!-- HEADER -->
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+            <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                    (click)="toggleSidebar('simple-left-sidebar-2')">
+                <mat-icon>menu</mat-icon>
+            </button>
+
+            <h2 class="m-0">Left sidebar with inner scroll</h2>
+
+        </div>
+        <!-- / HEADER -->
+
+        <!-- CONTENT -->
+        <div class="content mat-white-bg p-24">
+            <fuse-demo-content></fuse-demo-content>
+        </div>
+        <!-- / CONTENT -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

src/app/main/ui/page-layouts/simple/left-sidebar-2/left-sidebar-2.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-left-sidebar-2',
+    templateUrl: './left-sidebar-2.component.html',
+    styleUrls  : ['./left-sidebar-2.component.scss']
+})
+export class SimpleLeftSidebar2Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -0,0 +1,46 @@
+<div class="page-layout simple left-sidebar inner-sidebar">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+        <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                (click)="toggleSidebar('simple-left-sidebar-4')">
+            <mat-icon>menu</mat-icon>
+        </button>
+
+        <div>
+            <h2>Left inner sidebar with content scroll</h2>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <div class="content">
+
+        <!-- SIDEBAR -->
+        <fuse-sidebar class="sidebar" name="simple-left-sidebar-3" position="left" lockedOpen="gt-md">
+
+            <!-- SIDEBAR CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+                <fuse-demo-sidebar></fuse-demo-sidebar>
+            </div>
+            <!-- / SIDEBAR CONTENT -->
+
+        </fuse-sidebar>
+        <!-- / SIDEBAR -->
+
+        <!-- CENTER -->
+        <div class="center p-24" fusePerfectScrollbar>
+
+            <!-- CONTENT -->
+            <div class="content mat-elevation-z4 mat-white-bg p-24">
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </div>
+
+</div>

src/app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-left-sidebar-4',
+    templateUrl: './left-sidebar-3.component.html',
+    styleUrls  : ['./left-sidebar-3.component.scss']
+})
+export class SimpleLeftSidebar3Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

src/app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component.html

@@ -0,0 +1,46 @@
+<div class="page-layout simple left-sidebar inner-sidebar inner-scroll">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+        <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                (click)="toggleSidebar('simple-left-sidebar-4')">
+            <mat-icon>menu</mat-icon>
+        </button>
+
+        <div>
+            <h2>Left inner sidebar with inner scroll</h2>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <div class="content">
+
+        <!-- SIDEBAR -->
+        <fuse-sidebar class="sidebar" name="simple-left-sidebar-3" position="left" lockedOpen="gt-md">
+
+            <!-- SIDEBAR CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+                <fuse-demo-sidebar></fuse-demo-sidebar>
+            </div>
+            <!-- / SIDEBAR CONTENT -->
+
+        </fuse-sidebar>
+        <!-- / SIDEBAR -->
+
+        <!-- CENTER -->
+        <div class="center p-24" fusePerfectScrollbar>
+
+            <!-- CONTENT -->
+            <div class="content mat-elevation-z4 mat-white-bg p-24">
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </div>
+
+</div>

src/app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-left-sidebar-4',
+    templateUrl: './left-sidebar-4.component.html',
+    styleUrls  : ['./left-sidebar-4.component.scss']
+})
+export class SimpleLeftSidebar4Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -1,50 +0,0 @@
-<div class="page-layout simple left-sidenav">
-
-    <mat-sidenav-container>
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
-                     fuseMatSidenavHelper="simple-left-sidenav" mat-is-locked-open="gt-md">
-
-            <div class="sidenav-content p-24">
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-        <!-- CENTER -->
-        <div class="center">
-
-            <!-- HEADER -->
-            <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-
-                <button mat-icon-button class="sidenav-toggle"
-                        fuseMatSidenavToggler="simple-left-sidenav"
-                        fxHide.gt-md>
-                    <mat-icon>menu</mat-icon>
-                </button>
-
-                <div>
-                    <h2>Left sidenav with content scroll</h2>
-                </div>
-
-            </div>
-            <!-- / HEADER -->
-
-            <!-- CONTENT -->
-            <div class="content p-24 mat-white-bg">
-
-                <fuse-demo-content></fuse-demo-content>
-
-            </div>
-            <!-- / CONTENT -->
-
-        </div>
-        <!-- / CENTER -->
-
-    </mat-sidenav-container>
-
-</div>

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

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-left-sidenav-1',
-    templateUrl: './left-sidenav-1.component.html',
-    styleUrls  : ['./left-sidenav-1.component.scss']
-})
-export class SimpleLeftSidenav1Component
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}

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

@@ -1,50 +0,0 @@
-<div class="page-layout simple left-sidenav inner-scroll">
-
-    <mat-sidenav-container>
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
-                     fuseMatSidenavHelper="simple-left-sidenav-2" mat-is-locked-open="gt-md">
-
-            <div class="sidenav-content p-24" fusePerfectScrollbar>
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-        <!-- CENTER -->
-        <div class="center" fusePerfectScrollbar>
-
-            <!-- HEADER -->
-            <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-
-                <button mat-icon-button class="sidenav-toggle"
-                        fuseMatSidenavToggler="simple-left-sidenav-2"
-                        fxHide.gt-md>
-                    <mat-icon>menu</mat-icon>
-                </button>
-
-                <div>
-                    <h2>Left sidenav with inner scroll</h2>
-                </div>
-
-            </div>
-            <!-- / HEADER -->
-
-            <!-- CONTENT -->
-            <div class="content p-24 mat-white-bg">
-
-                <fuse-demo-content></fuse-demo-content>
-
-            </div>
-            <!-- / CONTENT -->
-
-        </div>
-        <!-- / CENTER -->
-
-    </mat-sidenav-container>
-
-</div>

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

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-left-sidenav-2',
-    templateUrl: './left-sidenav-2.component.html',
-    styleUrls  : ['./left-sidenav-2.component.scss']
-})
-export class SimpleLeftSidenav2Component
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}

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

@@ -1,50 +0,0 @@
-<div class="page-layout simple left-sidenav inner-sidenav inner-scroll">
-
-    <!-- HEADER -->
-    <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-
-        <button mat-icon-button class="sidenav-toggle"
-                fuseMatSidenavToggler="simple-left-sidenav-3"
-                fxHide.gt-md>
-            <mat-icon>menu</mat-icon>
-        </button>
-
-        <div>
-            <h2>Left inner sidenav with inner scroll</h2>
-        </div>
-
-    </div>
-    <!-- / HEADER -->
-
-    <mat-sidenav-container>
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
-                     fuseMatSidenavHelper="simple-left-sidenav-3" mat-is-locked-open="gt-md">
-
-            <div class="sidenav-content" fusePerfectScrollbar>
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-        <!-- CENTER -->
-        <div class="center p-24" fusePerfectScrollbar>
-
-            <!-- CONTENT -->
-            <div class="content p-24 mat-elevation-z4 mat-white-bg">
-
-                <fuse-demo-content></fuse-demo-content>
-
-            </div>
-            <!-- / CONTENT -->
-
-        </div>
-        <!-- / CENTER -->
-
-    </mat-sidenav-container>
-
-</div>

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

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-left-sidenav-3',
-    templateUrl: './left-sidenav-3.component.html',
-    styleUrls  : ['./left-sidenav-3.component.scss']
-})
-export class SimpleLeftSidenav3Component
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}

src/app/main/ui/page-layouts/simple/right-sidebar-1/right-sidebar-1.component.html

@@ -0,0 +1,40 @@
+<div class="page-layout simple right-sidebar">
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="simple-right-sidebar-1" position="right" lockedOpen="gt-md">
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24">
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center">
+
+        <!-- HEADER -->
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+            <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                    (click)="toggleSidebar('simple-right-sidebar-1')">
+                <mat-icon>menu</mat-icon>
+            </button>
+
+            <h2 class="m-0">Right sidebar with content scroll</h2>
+
+        </div>
+        <!-- / HEADER -->
+
+        <!-- CONTENT -->
+        <div class="content mat-white-bg p-24">
+            <fuse-demo-content></fuse-demo-content>
+        </div>
+        <!-- / CONTENT -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

src/app/main/ui/page-layouts/simple/right-sidebar-1/right-sidebar-1.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-right-sidebar-1',
+    templateUrl: './right-sidebar-1.component.html',
+    styleUrls  : ['./right-sidebar-1.component.scss']
+})
+export class SimpleRightSidebar1Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

src/app/main/ui/page-layouts/simple/right-sidebar-2/right-sidebar-2.component.html

@@ -0,0 +1,40 @@
+<div class="page-layout simple right-sidebar inner-scroll">
+
+    <!-- SIDEBAR -->
+    <fuse-sidebar class="sidebar" name="simple-right-sidebar-2" position="left" lockedOpen="gt-md">
+
+        <!-- SIDEBAR CONTENT -->
+        <div class="content p-24" fusePerfectScrollbar>
+            <fuse-demo-sidebar></fuse-demo-sidebar>
+        </div>
+        <!-- / SIDEBAR CONTENT -->
+
+    </fuse-sidebar>
+    <!-- / SIDEBAR -->
+
+    <!-- CENTER -->
+    <div class="center" fusePerfectScrollbar>
+
+        <!-- HEADER -->
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+            <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                    (click)="toggleSidebar('simple-right-sidebar-2')">
+                <mat-icon>menu</mat-icon>
+            </button>
+
+            <h2 class="m-0">Right sidebar with inner scroll</h2>
+
+        </div>
+        <!-- / HEADER -->
+
+        <!-- CONTENT -->
+        <div class="content mat-white-bg p-24">
+            <fuse-demo-content></fuse-demo-content>
+        </div>
+        <!-- / CONTENT -->
+
+    </div>
+    <!-- / CENTER -->
+
+</div>

src/app/main/ui/page-layouts/simple/right-sidebar-2/right-sidebar-2.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-right-sidebar-2',
+    templateUrl: './right-sidebar-2.component.html',
+    styleUrls  : ['./right-sidebar-2.component.scss']
+})
+export class SimpleRightSidebar2Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -0,0 +1,46 @@
+<div class="page-layout simple right-sidebar inner-sidebar">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+        <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                (click)="toggleSidebar('simple-right-sidebar-4')">
+            <mat-icon>menu</mat-icon>
+        </button>
+
+        <div>
+            <h2>Right inner sidebar with content scroll</h2>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <div class="content">
+
+        <!-- SIDEBAR -->
+        <fuse-sidebar class="sidebar" name="simple-right-sidebar-3" position="left" lockedOpen="gt-md">
+
+            <!-- SIDEBAR CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+                <fuse-demo-sidebar></fuse-demo-sidebar>
+            </div>
+            <!-- / SIDEBAR CONTENT -->
+
+        </fuse-sidebar>
+        <!-- / SIDEBAR -->
+
+        <!-- CENTER -->
+        <div class="center p-24" fusePerfectScrollbar>
+
+            <!-- CONTENT -->
+            <div class="content mat-elevation-z4 mat-white-bg p-24">
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </div>
+
+</div>

src/app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-right-sidebar-4',
+    templateUrl: './right-sidebar-3.component.html',
+    styleUrls  : ['./right-sidebar-3.component.scss']
+})
+export class SimpleRightSidebar3Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

src/app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component.html

@@ -0,0 +1,46 @@
+<div class="page-layout simple right-sidebar inner-sidebar inner-scroll">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+        <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
+                (click)="toggleSidebar('simple-right-sidebar-4')">
+            <mat-icon>menu</mat-icon>
+        </button>
+
+        <div>
+            <h2>Right inner sidebar with inner scroll</h2>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <div class="content">
+
+        <!-- SIDEBAR -->
+        <fuse-sidebar class="sidebar" name="simple-right-sidebar-3" position="left" lockedOpen="gt-md">
+
+            <!-- SIDEBAR CONTENT -->
+            <div class="content p-24" fusePerfectScrollbar>
+                <fuse-demo-sidebar></fuse-demo-sidebar>
+            </div>
+            <!-- / SIDEBAR CONTENT -->
+
+        </fuse-sidebar>
+        <!-- / SIDEBAR -->
+
+        <!-- CENTER -->
+        <div class="center p-24" fusePerfectScrollbar>
+
+            <!-- CONTENT -->
+            <div class="content mat-elevation-z4 mat-white-bg p-24">
+                <fuse-demo-content></fuse-demo-content>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </div>
+
+</div>

src/app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector   : 'simple-right-sidebar-4',
+    templateUrl: './right-sidebar-4.component.html',
+    styleUrls  : ['./right-sidebar-4.component.scss']
+})
+export class SimpleRightSidebar4Component
+{
+    /**
+     * Constructor
+     *
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar
+     *
+     * @param name
+     */
+    toggleSidebar(name): void
+    {
+        this._fuseSidebarService.getSidebar(name).toggleOpen();
+    }
+}

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

@@ -1,50 +0,0 @@
-<div class="page-layout simple right-sidenav" fusePerfectScrollbar>
-
-    <mat-sidenav-container>
-
-        <!-- CENTER -->
-        <div class="center" fusePerfectScrollbar>
-
-            <!-- HEADER -->
-            <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-
-                <button mat-icon-button class="sidenav-toggle"
-                        fuseMatSidenavToggler="simple-right-sidenav"
-                        fxHide.gt-md>
-                    <mat-icon>menu</mat-icon>
-                </button>
-
-                <div>
-                    <h2>Right sidenav with content scroll</h2>
-                </div>
-
-            </div>
-            <!-- / HEADER -->
-
-            <!-- CONTENT -->
-            <div class="content p-24 mat-white-bg">
-
-                <fuse-demo-content></fuse-demo-content>
-
-            </div>
-            <!-- / CONTENT -->
-
-        </div>
-        <!-- / CENTER -->
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
-                     fuseMatSidenavHelper="simple-right-sidenav" mat-is-locked-open="gt-md">
-
-            <div class="sidenav-content p-24" fusePerfectScrollbar>
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-    </mat-sidenav-container>
-
-</div>

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

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-right-sidenav-1',
-    templateUrl: './right-sidenav-1.component.html',
-    styleUrls  : ['./right-sidenav-1.component.scss']
-})
-export class SimpleRightSidenav1Component
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}

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

@@ -1,50 +0,0 @@
-<div class="page-layout simple right-sidenav inner-scroll">
-
-    <mat-sidenav-container>
-
-        <!-- CENTER -->
-        <div class="center" fusePerfectScrollbar>
-
-            <!-- HEADER -->
-            <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-
-                <button mat-icon-button class="sidenav-toggle"
-                        fuseMatSidenavToggler="simple-right-sidenav-2"
-                        fxHide.gt-md>
-                    <mat-icon>menu</mat-icon>
-                </button>
-
-                <div>
-                    <h2>Right sidenav with inner scroll</h2>
-                </div>
-
-            </div>
-            <!-- / HEADER -->
-
-            <!-- CONTENT -->
-            <div class="content p-24 mat-white-bg">
-
-                <fuse-demo-content></fuse-demo-content>
-
-            </div>
-            <!-- / CONTENT -->
-
-        </div>
-        <!-- / CENTER -->
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
-                     fuseMatSidenavHelper="simple-right-sidenav-2" mat-is-locked-open="gt-md">
-
-            <div class="sidenav-content p-24" fusePerfectScrollbar>
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-    </mat-sidenav-container>
-
-</div>

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

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-right-sidenav-2',
-    templateUrl: './right-sidenav-2.component.html',
-    styleUrls  : ['./right-sidenav-2.component.scss']
-})
-export class SimpleRightSidenav2Component
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}

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

@@ -1,50 +0,0 @@
-<div class="page-layout simple right-sidenav inner-sidenav inner-scroll">
-
-    <!-- HEADER -->
-    <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
-
-        <button mat-icon-button class="sidenav-toggle"
-                fuseMatSidenavToggler="simple-right-sidenav-3"
-                fxHide.gt-md>
-            <mat-icon>menu</mat-icon>
-        </button>
-
-        <div>
-            <h2>Right inner sidenav with content scroll</h2>
-        </div>
-
-    </div>
-    <!-- / HEADER -->
-
-    <mat-sidenav-container>
-
-        <!-- CENTER -->
-        <div class="center p-24" fusePerfectScrollbar>
-
-            <!-- CONTENT -->
-            <div class="content p-24 mat-elevation-z4 mat-white-bg">
-
-                <fuse-demo-content></fuse-demo-content>
-
-            </div>
-            <!-- / CONTENT -->
-
-        </div>
-        <!-- / CENTER -->
-
-        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
-                     fuseMatSidenavHelper="simple-right-sidenav-3" mat-is-locked-open="gt-md">
-
-            <div class="sidenav-content" fusePerfectScrollbar>
-
-                <fuse-demo-sidenav></fuse-demo-sidenav>
-
-            </div>
-
-        </mat-sidenav>
-        <!-- / SIDENAV -->
-
-    </mat-sidenav-container>
-
-</div>

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

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'simple-right-sidenav-3',
-    templateUrl: './right-sidenav-3.component.html',
-    styleUrls  : ['./right-sidenav-3.component.scss']
-})
-export class SimpleRightSidenav3Component
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
-}

src/app/navigation/navigation.ts

@@ -432,52 +432,52 @@ export const navigation: FuseNavigation[] = [
                                 url  : '/ui/page-layouts/carded/full-width-tabbed-2'
                             },
                             {
-                                id   : 'left-sidenav-1',
+                                id   : 'left-sidebar-1',
-                                title: 'Left Sidenav #1',
+                                title: 'Left Sidebar #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/left-sidenav-1'
+                                url  : '/ui/page-layouts/carded/left-sidebar-1'
                             },
                             {
-                                id   : 'left-sidenav-2',
+                                id   : 'left-sidebar-2',
-                                title: 'Left Sidenav #2',
+                                title: 'Left Sidebar #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/left-sidenav-2'
+                                url  : '/ui/page-layouts/carded/left-sidebar-2'
                             },
                             {
-                                id   : 'left-sidenav-tabbed-1',
+                                id   : 'left-sidebar-tabbed-1',
-                                title: 'Left Sidenav Tabbed #1',
+                                title: 'Left Sidebar Tabbed #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/left-sidenav-tabbed-1'
+                                url  : '/ui/page-layouts/carded/left-sidebar-tabbed-1'
                             },
                             {
-                                id   : 'left-sidenav-tabbed-2',
+                                id   : 'left-sidebar-tabbed-2',
-                                title: 'Left Sidenav Tabbed #2',
+                                title: 'Left Sidebar Tabbed #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/left-sidenav-tabbed-2'
+                                url  : '/ui/page-layouts/carded/left-sidebar-tabbed-2'
                             },
                             {
-                                id   : 'right-sidenav-1',
+                                id   : 'right-sidebar-1',
-                                title: 'Right Sidenav #1',
+                                title: 'Right Sidebar #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/right-sidenav-1'
+                                url  : '/ui/page-layouts/carded/right-sidebar-1'
                             },
                             {
-                                id   : 'right-sidenav-2',
+                                id   : 'right-sidebar-2',
-                                title: 'Right Sidenav #2',
+                                title: 'Right Sidebar #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/right-sidenav-2'
+                                url  : '/ui/page-layouts/carded/right-sidebar-2'
                             },
                             {
-                                id   : 'right-sidenav-tabbed-1',
+                                id   : 'right-sidebar-tabbed-1',
-                                title: 'Right Sidenav Tabbed #1',
+                                title: 'Right Sidebar Tabbed #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/right-sidenav-tabbed-1'
+                                url  : '/ui/page-layouts/carded/right-sidebar-tabbed-1'
                             },
                             {
-                                id   : 'right-sidenav-tabbed-2',
+                                id   : 'right-sidebar-tabbed-2',
-                                title: 'Right Sidenav Tabbed #2',
+                                title: 'Right Sidebar Tabbed #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/carded/right-sidenav-tabbed-2'
+                                url  : '/ui/page-layouts/carded/right-sidebar-tabbed-2'
                             }
                         ]
                     },
@@ -486,7 +486,7 @@ export const navigation: FuseNavigation[] = [
                         title   : 'Simple',
                         type    : 'collapsable',
                         badge   : {
-                            title: '8',
+                            title: '10',
                             bg   : '#525e8a',
                             fg   : '#FFFFFF'
                         },
@@ -498,40 +498,52 @@ export const navigation: FuseNavigation[] = [
                                 url  : '/ui/page-layouts/simple/full-width-1'
                             },
                             {
-                                id   : 'left-sidenav-1',
+                                id   : 'left-sidebar-1',
-                                title: 'Left Sidenav #1',
+                                title: 'Left Sidebar #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/left-sidenav-1'
+                                url  : '/ui/page-layouts/simple/left-sidebar-1'
                             },
                             {
-                                id   : 'left-sidenav-2',
+                                id   : 'left-sidebar-2',
-                                title: 'Left Sidenav #2',
+                                title: 'Left Sidebar #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/left-sidenav-2'
+                                url  : '/ui/page-layouts/simple/left-sidebar-2'
                             },
                             {
-                                id   : 'left-sidenav-3',
+                                id   : 'left-sidebar-3',
-                                title: 'Left Sidenav #3',
+                                title: 'Left Sidebar #3',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/left-sidenav-3'
+                                url  : '/ui/page-layouts/simple/left-sidebar-3'
                             },
                             {
-                                id   : 'right-sidenav-1',
+                                id   : 'left-sidebar-4',
-                                title: 'Right Sidenav #1',
+                                title: 'Left Sidebar #4',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/right-sidenav-1'
+                                url  : '/ui/page-layouts/simple/left-sidebar-4'
                             },
                             {
-                                id   : 'right-sidenav-2',
+                                id   : 'right-sidebar-1',
-                                title: 'Right Sidenav #2',
+                                title: 'Right Sidebar #1',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/right-sidenav-2'
+                                url  : '/ui/page-layouts/simple/right-sidebar-1'
                             },
                             {
-                                id   : 'right-sidenav-3',
+                                id   : 'right-sidebar-2',
-                                title: 'Right Sidenav #3',
+                                title: 'Right Sidebar #2',
                                 type : 'item',
-                                url  : '/ui/page-layouts/simple/right-sidenav-3'
+                                url  : '/ui/page-layouts/simple/right-sidebar-2'
+                            },
+                            {
+                                id   : 'right-sidebar-3',
+                                title: 'Right Sidebar #3',
+                                type : 'item',
+                                url  : '/ui/page-layouts/simple/right-sidebar-3'
+                            },
+                            {
+                                id   : 'right-sidebar-4',
+                                title: 'Right Sidebar #4',
+                                type : 'item',
+                                url  : '/ui/page-layouts/simple/right-sidebar-4'
                             },
                             {
                                 id   : 'tabbed-1',
@@ -666,7 +678,7 @@ export const navigation: FuseNavigation[] = [
                             },
                             {
                                 id   : 'sidenav',
-                                title: 'Sidenav',
+                                title: 'Sidebar',
                                 type : 'item',
                                 url  : '/components/angular-material/sidenav'
                             },