From 507fe97e84062500b7c4a473f2396378e8d5fdb1 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 12 Jun 2018 10:44:00 +0300
Subject: [PATCH] Changed layout names to make them easier to understand New
 navigation structure for documentation and Angular Material elements

---
 .../theme-options.component.html              | 165 +++++++++---------
 .../theme-options/theme-options.component.ts  |  65 ++++---
 src/app/app.component.html                    |  16 +-
 src/app/fuse-config/index.ts                  |   2 +-
 src/app/layout/layout.module.ts               |  15 +-
 ...component.html => layout-1.component.html} |   0
 ...component.scss => layout-1.component.scss} |   2 +-
 ...oll.component.ts => layout-1.component.ts} |   8 +-
 ...dy-scroll.module.ts => layout-1.module.ts} |   8 +-
 .../vertical/layout-2/layout-2.component.html |  24 ++-
 .../vertical/layout-2/layout-2.component.scss |  11 +-
 .../layout-3.component.html}                  |  24 +--
 .../layout-3.component.scss}                  |  15 +-
 .../layout-3.component.ts}                    |   8 +-
 .../layout-3.module.ts}                       |  10 +-
 src/app/navigation/navigation.ts              |  12 +-
 16 files changed, 193 insertions(+), 192 deletions(-)
 rename src/app/layout/vertical/layout-1/{content-scroll/content-scroll.component.html => layout-1.component.html} (100%)
 rename src/app/layout/vertical/layout-1/{content-scroll/content-scroll.component.scss => layout-1.component.scss} (97%)
 rename src/app/layout/vertical/layout-1/{body-scroll/body-scroll.component.ts => layout-1.component.ts} (86%)
 rename src/app/layout/vertical/layout-1/{body-scroll/body-scroll.module.ts => layout-1.module.ts} (78%)
 rename src/app/layout/vertical/{layout-1/body-scroll/body-scroll.component.html => layout-3/layout-3.component.html} (82%)
 rename src/app/layout/vertical/{layout-1/body-scroll/body-scroll.component.scss => layout-3/layout-3.component.scss} (80%)
 rename src/app/layout/vertical/{layout-1/content-scroll/content-scroll.component.ts => layout-3/layout-3.component.ts} (86%)
 rename src/app/layout/vertical/{layout-1/content-scroll/content-scroll.module.ts => layout-3/layout-3.module.ts} (72%)

diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html
index 8f521bfe..4d0d2a1c 100644
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -18,25 +18,30 @@
             <h2>Layout Styles</h2>
 
             <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
-                <mat-radio-button class="mb-12" value="vertical-layout-1-content-scroll">
-                    Vertical Layout #1 - Content Scroll
-                </mat-radio-button>
-                <mat-radio-button class="mb-12" value="vertical-layout-1-body-scroll">
-                    Vertical Layout #1 - Body Scroll
+
+                <mat-radio-button class="mb-12" value="vertical-layout-1">
+                    Vertical Layout #1
                 </mat-radio-button>
+
                 <mat-radio-button class="mb-12" value="vertical-layout-2">
                     Vertical Layout #2
                 </mat-radio-button>
+
+                <mat-radio-button class="mb-12" value="vertical-layout-3">
+                    Vertical Layout #3
+                </mat-radio-button>
+
                 <mat-radio-button class="mb-12" value="horizontal-layout-1">
                     Horizontal Layout #1
                 </mat-radio-button>
+
             </mat-radio-group>
 
             <!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
             <ng-container [ngSwitch]="fuseConfig.layout.style">
 
-                <!-- VERTICAL LAYOUT #1 - CONTENT SCROLL -->
-                <ng-container *ngSwitchCase="'vertical-layout-1-content-scroll'">
+                <!-- VERTICAL LAYOUT #1 -->
+                <ng-container *ngSwitchCase="'vertical-layout-1'">
 
                     <!-- LAYOUT WIDTH -->
                     <div class="group mt-32">
@@ -108,79 +113,6 @@
 
                 </ng-container>
 
-                <!-- VERTICAL LAYOUT #1 - BODY SCROLL -->
-                <ng-container *ngSwitchCase="'vertical-layout-1-body-scroll'">
-
-                    <!-- LAYOUT WIDTH -->
-                    <div class="group mt-32">
-
-                        <h2>Layout Width</h2>
-                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
-                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
-                        </mat-radio-group>
-
-                    </div>
-
-                    <!-- NAVBAR -->
-                    <div class="group" formGroupName="navbar">
-
-                        <h2>Navbar</h2>
-
-                        <mat-slide-toggle formControlName="hidden">
-                            Hide
-                        </mat-slide-toggle>
-
-                        <mat-slide-toggle class="mt-24" formControlName="folded">
-                            Folded
-                        </mat-slide-toggle>
-
-                        <h3 class="mt-24">Position:</h3>
-                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
-                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
-                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
-                        </mat-radio-group>
-
-                    </div>
-
-                    <!-- TOOLBAR -->
-                    <div class="group" formGroupName="toolbar">
-
-                        <h2>Toolbar</h2>
-
-                        <mat-slide-toggle formControlName="hidden">
-                            Hide
-                        </mat-slide-toggle>
-
-                        <h3 class="mt-24">Position:</h3>
-                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
-                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
-                        </mat-radio-group>
-
-                    </div>
-
-                    <!-- FOOTER -->
-                    <div class="group" formGroupName="footer">
-
-                        <h2>Footer</h2>
-
-                        <mat-slide-toggle formControlName="hidden">
-                            Hide
-                        </mat-slide-toggle>
-
-                        <h3 class="mt-24">Position:</h3>
-                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
-                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
-                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
-                        </mat-radio-group>
-
-                    </div>
-
-                </ng-container>
-
                 <!-- VERTICAL LAYOUT #2 -->
                 <ng-container *ngSwitchCase="'vertical-layout-2'">
 
@@ -216,6 +148,79 @@
 
                     </div>
 
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
+                <!-- VERTICAL LAYOUT #3 -->
+                <ng-container *ngSwitchCase="'vertical-layout-3'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-32">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <mat-slide-toggle class="mt-24" formControlName="folded">
+                            Folded
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                     <!-- TOOLBAR -->
                     <div class="group" formGroupName="toolbar">
 
diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts
index c801768f..fa47697b 100644
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -123,6 +123,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             'id'      : 'custom-function',
             'title'   : 'Custom Function',
             'type'    : 'group',
+            'icon'    : 'settings',
             'children': [
                 {
                     'id'      : 'customize',
@@ -167,8 +168,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     {
         switch ( value )
         {
-            // Vertical Layout #1 - Content scroll
-            case 'vertical-layout-1-content-scroll':
+            // Vertical Layout #1
+            case 'vertical-layout-1':
             {
                 this.form.patchValue({
                     layout: {
@@ -195,36 +196,36 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 break;
             }
 
-            // Vertical Layout #1 - Body scroll
-            case 'vertical-layout-1-body-scroll':
-            {
-                this.form.patchValue({
-                    layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            hidden    : false,
-                            position  : 'left',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
-                        },
-                        toolbar: {
-                            hidden    : false,
-                            position  : 'below',
-                            background: 'mat-white-500-bg'
-                        },
-                        footer : {
-                            hidden    : false,
-                            position  : 'below',
-                            background: 'mat-fuse-dark-900-bg'
-                        }
-                    }
-                });
-
-                break;
-            }
-
             // Vertical Layout #2
             case 'vertical-layout-2':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width  : 'fullwidth',
+                        navbar : {
+                            hidden    : false,
+                            position  : 'left',
+                            folded    : false,
+                            background: 'mat-fuse-dark-700-bg'
+                        },
+                        toolbar: {
+                            hidden    : false,
+                            position  : 'below',
+                            background: 'mat-white-500-bg'
+                        },
+                        footer : {
+                            hidden    : false,
+                            position  : 'below',
+                            background: 'mat-fuse-dark-900-bg'
+                        }
+                    }
+                });
+
+                break;
+            }
+
+            // Vertical Layout #3
+            case 'vertical-layout-3':
             {
                 this.form.patchValue({
                     layout: {
@@ -292,8 +293,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         this._fuseSidebarService.getSidebar(key).toggleOpen();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2048afa4..950d5f1a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,11 +1,6 @@
-<!-- VERTICAL LAYOUT 1 - BODY SCROLL -->
-<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-body-scroll'">
-    <vertical-layout-1-body-scroll></vertical-layout-1-body-scroll>
-</ng-container>
-
-<!-- VERTICAL LAYOUT 1 - CONTENT SCROLL -->
-<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-content-scroll'">
-    <vertical-layout-1-content-scroll></vertical-layout-1-content-scroll>
+<!-- VERTICAL LAYOUT 1 -->
+<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
+    <vertical-layout-1></vertical-layout-1>
 </ng-container>
 
 <!-- VERTICAL LAYOUT 2 -->
@@ -13,6 +8,11 @@
     <vertical-layout-2></vertical-layout-2>
 </ng-container>
 
+<!-- VERTICAL LAYOUT 3 -->
+<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
+    <vertical-layout-3></vertical-layout-3>
+</ng-container>
+
 <!-- HORIZONTAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
     <horizontal-layout-1></horizontal-layout-1>
diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts
index 73af6b23..3677bb9e 100644
--- a/src/app/fuse-config/index.ts
+++ b/src/app/fuse-config/index.ts
@@ -10,7 +10,7 @@ import { FuseConfig } from '@fuse/types';
 
 export const fuseConfig: FuseConfig = {
     layout          : {
-        style         : 'vertical-layout-1-content-scroll',
+        style         : 'vertical-layout-1',
         width         : 'fullwidth',
         navbar        : {
             hidden    : false,
diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts
index 42cd08a8..d728adef 100644
--- a/src/app/layout/layout.module.ts
+++ b/src/app/layout/layout.module.ts
@@ -1,26 +1,23 @@
 import { NgModule } from '@angular/core';
 
-import { VerticalLayout1BodyScrollModule } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.module';
-import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.module';
-
+import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.module';
 import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module';
+import { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module';
 
 import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module';
 
 @NgModule({
     imports: [
-        VerticalLayout1BodyScrollModule,
-        VerticalLayout1ContentScrollModule,
-
+        VerticalLayout1Module,
         VerticalLayout2Module,
+        VerticalLayout3Module,
 
         HorizontalLayout1Module
     ],
     exports: [
-        VerticalLayout1BodyScrollModule,
-        VerticalLayout1ContentScrollModule,
-
+        VerticalLayout1Module,
         VerticalLayout2Module,
+        VerticalLayout3Module,
 
         HorizontalLayout1Module
     ]
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html
similarity index 100%
rename from src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html
rename to src/app/layout/vertical/layout-1/layout-1.component.html
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss b/src/app/layout/vertical/layout-1/layout-1.component.scss
similarity index 97%
rename from src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss
rename to src/app/layout/vertical/layout-1/layout-1.component.scss
index db1a6bcf..91348554 100644
--- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss
+++ b/src/app/layout/vertical/layout-1/layout-1.component.scss
@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-vertical-layout-1-content-scroll {
+vertical-layout-1 {
     display: flex;
     flex: 1 1 auto;
     width: 100%;
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts b/src/app/layout/vertical/layout-1/layout-1.component.ts
similarity index 86%
rename from src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts
rename to src/app/layout/vertical/layout-1/layout-1.component.ts
index 54892576..07c58e02 100644
--- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts
+++ b/src/app/layout/vertical/layout-1/layout-1.component.ts
@@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
-    selector     : 'vertical-layout-1-body-scroll',
-    templateUrl  : './body-scroll.component.html',
-    styleUrls    : ['./body-scroll.component.scss'],
+    selector     : 'vertical-layout-1',
+    templateUrl  : './layout-1.component.html',
+    styleUrls    : ['./layout-1.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class VerticalLayout1BodyScrollComponent implements OnInit, OnDestroy
+export class VerticalLayout1Component implements OnInit, OnDestroy
 {
     fuseConfig: any;
     navigation: any;
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts b/src/app/layout/vertical/layout-1/layout-1.module.ts
similarity index 78%
rename from src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts
rename to src/app/layout/vertical/layout-1/layout-1.module.ts
index e942d517..a4d70f06 100644
--- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts
+++ b/src/app/layout/vertical/layout-1/layout-1.module.ts
@@ -10,11 +10,11 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
 import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
 import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
 
-import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.component';
+import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.component';
 
 @NgModule({
     declarations: [
-        VerticalLayout1BodyScrollComponent
+        VerticalLayout1Component
     ],
     imports     : [
         RouterModule,
@@ -29,9 +29,9 @@ import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1
         ToolbarModule
     ],
     exports     : [
-        VerticalLayout1BodyScrollComponent
+        VerticalLayout1Component
     ]
 })
-export class VerticalLayout1BodyScrollModule
+export class VerticalLayout1Module
 {
 }
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html
index f6468ccc..6eb66b31 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -23,11 +23,25 @@
             </ng-container>
             <!-- / NAVBAR: Left -->
 
-            <!-- CONTENT -->
-            <content
-                [ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
-            </content>
-            <!-- / CONTENT -->
+            <div id="container-3" class="container">
+
+                <!-- TOOLBAR: Below -->
+                <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
+                    <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+                </ng-container>
+                <!-- / TOOLBAR: Below -->
+
+                <!-- CONTENT -->
+                <content></content>
+                <!-- / CONTENT -->
+
+                <!-- FOOTER: Below -->
+                <ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
+                    <ng-container *ngTemplateOutlet="footer"></ng-container>
+                </ng-container>
+                <!-- / FOOTER: Below -->
+
+            </div>
 
             <!-- NAVBAR: Right -->
             <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss
index cf112512..1ade45b0 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.scss
+++ b/src/app/layout/vertical/layout-2/layout-2.component.scss
@@ -39,15 +39,14 @@ vertical-layout-2 {
                 display: flex;
                 flex: 1 0 auto;
                 width: 100%;
-                min-width: 0;
-                padding: 32px;
 
-                // Content component
-                > content {
+                // Container 3
+                > .container {
+                    position: relative;
+                    display: flex;
                     flex: 1 1 auto;
+                    flex-direction: column;
                     min-width: 0;
-
-                    @include mat-elevation(3);
                 }
             }
         }
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html
similarity index 82%
rename from src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html
rename to src/app/layout/vertical/layout-3/layout-3.component.html
index 6eb66b31..f6468ccc 100644
--- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -23,25 +23,11 @@
             </ng-container>
             <!-- / NAVBAR: Left -->
 
-            <div id="container-3" class="container">
-
-                <!-- TOOLBAR: Below -->
-                <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
-                    <ng-container *ngTemplateOutlet="toolbar"></ng-container>
-                </ng-container>
-                <!-- / TOOLBAR: Below -->
-
-                <!-- CONTENT -->
-                <content></content>
-                <!-- / CONTENT -->
-
-                <!-- FOOTER: Below -->
-                <ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
-                    <ng-container *ngTemplateOutlet="footer"></ng-container>
-                </ng-container>
-                <!-- / FOOTER: Below -->
-
-            </div>
+            <!-- CONTENT -->
+            <content
+                [ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
+            </content>
+            <!-- / CONTENT -->
 
             <!-- NAVBAR: Right -->
             <ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss b/src/app/layout/vertical/layout-3/layout-3.component.scss
similarity index 80%
rename from src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss
rename to src/app/layout/vertical/layout-3/layout-3.component.scss
index 951fe8d1..295c20d7 100644
--- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss
+++ b/src/app/layout/vertical/layout-3/layout-3.component.scss
@@ -1,6 +1,6 @@
-@import "src/@fuse/scss/fuse";
+@import "../../../../@fuse/scss/fuse";
 
-vertical-layout-1-body-scroll {
+vertical-layout-3 {
     display: flex;
     flex: 1 1 auto;
     width: 100%;
@@ -39,14 +39,15 @@ vertical-layout-1-body-scroll {
                 display: flex;
                 flex: 1 0 auto;
                 width: 100%;
+                min-width: 0;
+                padding: 32px;
 
-                // Container 3
-                > .container {
-                    position: relative;
-                    display: flex;
+                // Content component
+                > content {
                     flex: 1 1 auto;
-                    flex-direction: column;
                     min-width: 0;
+
+                    @include mat-elevation(3);
                 }
             }
         }
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts b/src/app/layout/vertical/layout-3/layout-3.component.ts
similarity index 86%
rename from src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts
rename to src/app/layout/vertical/layout-3/layout-3.component.ts
index 82c0d145..d99091b4 100644
--- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts
+++ b/src/app/layout/vertical/layout-3/layout-3.component.ts
@@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
-    selector     : 'vertical-layout-1-content-scroll',
-    templateUrl  : './content-scroll.component.html',
-    styleUrls    : ['./content-scroll.component.scss'],
+    selector     : 'vertical-layout-3',
+    templateUrl  : './layout-3.component.html',
+    styleUrls    : ['./layout-3.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class VerticalLayout1ContentScrollComponent implements OnInit, OnDestroy
+export class VerticalLayout3Component implements OnInit, OnDestroy
 {
     fuseConfig: any;
     navigation: any;
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts b/src/app/layout/vertical/layout-3/layout-3.module.ts
similarity index 72%
rename from src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts
rename to src/app/layout/vertical/layout-3/layout-3.module.ts
index 9ba7418b..145b01cf 100644
--- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts
+++ b/src/app/layout/vertical/layout-3/layout-3.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { FuseSidebarModule } from '@fuse/components';
+import { FuseSidebarModule } from '@fuse/components/index';
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { ContentModule } from 'app/layout/components/content/content.module';
@@ -10,11 +10,11 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
 import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
 import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
 
-import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.component';
+import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.component';
 
 @NgModule({
     declarations: [
-        VerticalLayout1ContentScrollComponent
+        VerticalLayout3Component
     ],
     imports     : [
         RouterModule,
@@ -29,9 +29,9 @@ import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layou
         ToolbarModule
     ],
     exports     : [
-        VerticalLayout1ContentScrollComponent
+        VerticalLayout3Component
     ]
 })
-export class VerticalLayout1ContentScrollModule
+export class VerticalLayout3Module
 {
 }
diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts
index e02ec9af..f96d7a58 100644
--- a/src/app/navigation/navigation.ts
+++ b/src/app/navigation/navigation.ts
@@ -571,9 +571,10 @@ export const navigation: FuseNavigation[] = [
         ]
     },
     {
-        id      : 'angular-material-elements-elements',
+        id      : 'angular-material-elements',
         title   : 'Angular Material Elements',
         type    : 'group',
+        icon    : 'layers',
         children: [
             {
                 id      : 'form-controls',
@@ -838,6 +839,7 @@ export const navigation: FuseNavigation[] = [
     {
         id      : 'documentation',
         title   : 'Documentation',
+        icon    : 'import_contacts',
         type    : 'group',
         children: [
             {
@@ -846,10 +848,10 @@ export const navigation: FuseNavigation[] = [
                 type : 'item',
                 icon : 'update',
                 url  : '/documentation/changelog',
-                badge    : {
-                    title    : '6.1.0',
-                    bg       : '#EC0C8E',
-                    fg       : '#FFFFFF'
+                badge: {
+                    title: '6.1.0',
+                    bg   : '#EC0C8E',
+                    fg   : '#FFFFFF'
                 }
             },
             {