(Navbar) Moved navbar style into the variants

(AppComponent) Moved boxed class to the body
Fixed: Horizontal layout navbar covers entire screen

src/@fuse/scss/partials/_global.scss

@@ -11,3 +11,14 @@ body {
     overflow: hidden;
     background: #F5F5F5;
 }
+
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
+}

src/app/app.component.ts

@@ -75,7 +75,7 @@ export class AppComponent implements OnInit, OnDestroy
         // Add is-mobile class to the body if the platform is mobile
         if ( this._platform.ANDROID || this._platform.IOS )
         {
-            this.document.body.className += ' is-mobile';
+            this.document.body.classList.add('is-mobile');
         }
 
         // Set the private defaults
@@ -96,6 +96,15 @@ export class AppComponent implements OnInit, OnDestroy
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config) => {
                 this.fuseConfig = config;
+
+                if ( this.fuseConfig.layout.width === 'boxed' )
+                {
+                    this.document.body.classList.add('boxed');
+                }
+                else
+                {
+                    this.document.body.classList.remove('boxed');
+                }
             });
     }
 

src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss

@@ -1,3 +1,16 @@
 navbar-horizontal-style-1 {
 
 }
+
+navbar {
+
+    &.horizontal-style-1 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 56px;
+        max-height: 56px;
+        min-height: 56px;
+    }
+}

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

@@ -1,7 +1,3 @@
 navbar {
-    display: flex;
+
-    flex-direction: column;
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100%;
 }

src/app/layout/components/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector     : 'navbar',
@@ -8,16 +8,46 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
 })
 export class NavbarComponent
 {
-    // Variant
+    // Private
-    @Input()
+    _variant: string;
-    variant;
 
     /**
      * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {Renderer2} _renderer
      */
-    constructor()
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    )
     {
-        // Set the defaults
+        // Set the private defaults
-        this.variant = 'vertical-style-1';
+        this._variant = 'vertical-style-1';
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Variant
+     */
+    get variant(): string
+    {
+        return this._variant;
+    }
+
+    @Input()
+    set variant(value: string)
+    {
+        // Remove the old class name
+        this._renderer.removeClass(this._elementRef.nativeElement, this.variant);
+
+        // Store the variant value
+        this._variant = value;
+
+        // Add the new class name
+        this._renderer.addClass(this._elementRef.nativeElement, value);
     }
 }

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -68,6 +68,24 @@ fuse-sidebar {
 
 navbar {
 
+    &.vertical-style-1 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 100%;
+
+        &.right-navbar {
+
+            .toggle-sidebar-opened {
+
+                mat-icon {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
     navbar-vertical-style-1 {
         display: flex;
         flex-direction: column;
@@ -156,14 +174,4 @@ navbar {
             }
         }
     }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -30,6 +30,24 @@ fuse-sidebar {
 
 navbar {
 
+    &.vertical-style-2 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 100%;
+
+        &.right-navbar {
+
+            .toggle-sidebar-opened {
+
+                mat-icon {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
     navbar-vertical-style-2 {
         display: flex;
         flex-direction: column;
@@ -72,14 +90,4 @@ navbar {
         }
 
     }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -12,7 +12,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">

src/app/layout/horizontal/layout-1/layout-1.component.scss

@@ -16,13 +16,6 @@ horizontal-layout-1 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1
         > .container {
             position: relative;

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -12,7 +12,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">

src/app/layout/vertical/layout-1/layout-1.component.scss

@@ -16,13 +16,6 @@ vertical-layout-1 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1
         > .container {
             position: relative;

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -12,7 +12,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">

src/app/layout/vertical/layout-2/layout-2.component.scss

@@ -16,13 +16,6 @@ vertical-layout-2 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1 (Scrollable)
         > .container {
             position: relative;

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -12,7 +12,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">

src/app/layout/vertical/layout-3/layout-3.component.scss

@@ -16,13 +16,6 @@ vertical-layout-3 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1 (Scrollable)
         > .container {
             position: relative;

src/app/main/documentation/changelog/changelog.component.html

@@ -55,6 +55,7 @@
                         <span class="title">Fixed</span>
                         <ul>
                             <li>Scrolling is not smooth on iOS devices</li>
+                            <li>(Horizontal Layout) Navbar covers the entire screen</li>
                         </ul>
                     </div>