Started building the new layout system along with the new layouts

src/@fuse/components/index.ts

@@ -2,6 +2,7 @@ export * from './confirm-dialog/confirm-dialog.module';
 export * from './countdown/countdown.module';
 export * from './demo/demo.module';
 export * from './highlight/highlight.module';
+export * from './layouts/layouts.module';
 export * from './material-color-picker/material-color-picker.module';
 export * from './navigation/navigation.module';
 export * from './search-bar/search-bar.module';

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FuseVerticalNavBasicLayoutComponent } from '@fuse/components/layouts/vertical-nav/basic/basic.component';
+
+@NgModule({
+    declarations: [
+        FuseVerticalNavBasicLayoutComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseVerticalNavBasicLayoutComponent
+    ]
+})
+export class FuseLayoutsModule
+{
+}

src/@fuse/components/layouts/vertical-nav/basic/basic.component.scss

@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-fuse-main {
+fuse-vertical-nav-basic-layout {
     display: flex;
     flex-direction: column;
     width: 100%;

src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts

@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector     : 'fuse-vertical-nav-basic-layout',
+    templateUrl  : './basic.component.html',
+    styleUrls    : ['./basic.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseVerticalNavBasicLayoutComponent
+{
+    constructor()
+    {
+    }
+}

src/@fuse/components/theme-options/theme-options.component.html

@@ -12,6 +12,14 @@
 
     <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
+        <h3>Layout:</h3>
+        <mat-radio-group [(ngModel)]="config.layout.style" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
+            <mat-radio-button class="mr-8 mb-8" value="vertical">Vertical</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="horizontal">Horizontal</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
+        </mat-radio-group>
+
         <h3>Navigation:</h3>
         <mat-radio-group [(ngModel)]="config.layout.navigation" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">

src/app/app.component.html

@@ -1 +1,8 @@
-<fuse-main></fuse-main>
+<!--<fuse-main></fuse-main>-->
+
+<fuse-vertical-nav-basic-layout>
+    <fuse-navbar></fuse-navbar>
+    <fuse-toolbar></fuse-toolbar>
+    <fuse-content></fuse-content>
+    <fuse-footer></fuse-footer>
+</fuse-vertical-nav-basic-layout>

src/app/app.module.ts

@@ -8,39 +8,39 @@ import { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';
 
 import { FuseModule } from '@fuse/fuse.module';
+import { FuseLayoutsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { fuseConfig } from './fuse-config';
 
 import { AppComponent } from './app.component';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
-import { FuseMainModule } from './main/main.module';
 import { AppStoreModule } from './store/store.module';
 
 const appRoutes: Routes = [
     {
         path        : 'apps',
-        loadChildren: './main/content/apps/apps.module#FuseAppsModule'
+        loadChildren: './main/apps/apps.module#FuseAppsModule'
     },
     {
         path        : 'pages',
-        loadChildren: './main/content/pages/pages.module#FusePagesModule'
+        loadChildren: './main/pages/pages.module#FusePagesModule'
     },
     {
         path        : 'ui',
-        loadChildren: './main/content/ui/ui.module#FuseUIModule'
+        loadChildren: './main/ui/ui.module#FuseUIModule'
     },
     {
         path        : 'services',
-        loadChildren: './main/content/services/services.module#FuseServicesModule'
+        loadChildren: './main/services/services.module#FuseServicesModule'
     },
     {
         path        : 'components',
-        loadChildren: './main/content/components/components.module#FuseComponentsModule'
+        loadChildren: './main/components/components.module#FuseComponentsModule'
     },
     {
         path        : 'components-third-party',
-        loadChildren: './main/content/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule'
+        loadChildren: './main/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule'
     },
     {
         path      : '**',
@@ -66,10 +66,10 @@ const appRoutes: Routes = [
 
         // Fuse Main and Shared modules
         FuseModule.forRoot(fuseConfig),
+        FuseLayoutsModule,
         FuseSharedModule,
 
-        AppStoreModule,
+        AppStoreModule
-        FuseMainModule
     ],
     bootstrap   : [
         AppComponent

src/app/fuse-config.ts

@@ -7,8 +7,13 @@
  */
 export const fuseConfig = {
     layout          : {
-        navigation      : 'left', // 'right', 'left', 'top', 'none'
+        style     : 'vertical',
-        navigationFolded: false, // true, false
+        navigation: {
+            position: 'left',
+            folded  : false
+        },
+        // navigation      : 'left', // 'right', 'left', 'top', 'none'
+        // navigationFolded: false, // true, false
         toolbar         : 'below', // 'above', 'below', 'none'
         footer          : 'below', // 'above', 'below', 'none'
         mode            : 'fullwidth' // 'boxed', 'fullwidth'

src/app/layout/content/content.component.html

@@ -0,0 +1,6 @@
+<!--
+    *ngIf="true" hack is required here for router-outlet to work
+    correctly. Otherwise, it won't register the changes on the
+    layout and won't update the view.
+ -->
+<router-outlet *ngIf="true"></router-outlet>

src/app/layout/content/content.module.ts

@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseContentComponent } from 'app/main/content/content.component';
+import { FuseContentComponent } from 'app/layout/content/content.component';
 
 @NgModule({
     declarations: [

src/app/layout/footer/footer.module.ts

@@ -4,7 +4,7 @@ import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/mater
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseFooterComponent } from 'app/main/footer/footer.component';
+import { FuseFooterComponent } from 'app/layout/footer/footer.component';
 
 @NgModule({
     declarations: [

src/app/layout/navbar/navbar.component.scss

@@ -1,4 +1,4 @@
-@import "src/@fuse/scss/fuse";
+@import "../../../@fuse/scss/fuse";
 
 body {
 

src/app/layout/navbar/navbar.module.ts

@@ -5,7 +5,7 @@ import { MatButtonModule, MatIconModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseNavbarComponent } from 'app/main/navbar/navbar.component';
+import { FuseNavbarComponent } from 'app/layout/navbar/navbar.component';
 import { FuseNavigationModule } from '@fuse/components';
 
 @NgModule({

src/app/layout/quick-panel/quick-panel.module.ts

@@ -4,7 +4,7 @@ import { MatDividerModule, MatListModule, MatSlideToggleModule } from '@angular/
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseQuickPanelComponent } from 'app/main/quick-panel/quick-panel.component';
+import { FuseQuickPanelComponent } from 'app/layout/quick-panel/quick-panel.component';
 
 @NgModule({
     declarations: [

src/app/layout/toolbar/toolbar.component.scss

@@ -1,4 +1,4 @@
-@import 'src/@fuse/scss/fuse';
+@import '../../../@fuse/scss/fuse';
 
 :host {
     position: relative;

src/app/layout/toolbar/toolbar.module.ts

@@ -4,7 +4,7 @@ import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, Ma
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseToolbarComponent } from 'app/main/toolbar/toolbar.component';
+import { FuseToolbarComponent } from 'app/layout/toolbar/toolbar.component';
 import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
 
 @NgModule({