From 8dfc3e854b881eab18cde7e06079a8af56e9a742 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 13 Jul 2018 18:47:29 +0300
Subject: [PATCH 1/3] Added comments to the app.component.html

---
 src/app/app.component.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index bd4446ce..e08abc9d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,21 +6,25 @@
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
     <vertical-layout-1></vertical-layout-1>
 </ng-container>
+<!-- / VERTICAL LAYOUT 1 -->
 
 <!-- VERTICAL LAYOUT 2 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-2'">
     <vertical-layout-2></vertical-layout-2>
 </ng-container>
+<!-- / VERTICAL LAYOUT 2 -->
 
 <!-- VERTICAL LAYOUT 3 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
     <vertical-layout-3></vertical-layout-3>
 </ng-container>
+<!-- / VERTICAL LAYOUT 3 -->
 
 <!-- HORIZONTAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
     <horizontal-layout-1></horizontal-layout-1>
 </ng-container>
+<!-- / HORIZONTAL LAYOUT 1 -->
 
 <!-- THEME OPTIONS PANEL -->
 <button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
@@ -32,4 +36,5 @@
 
 <fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
     <fuse-theme-options></fuse-theme-options>
-</fuse-sidebar>
\ No newline at end of file
+</fuse-sidebar>
+<!-- / THEME OPTIONS PANEL -->

From 19c960cc4c60e3e6215539aae5a12eb2b5b4029e Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 13 Jul 2018 18:55:45 +0300
Subject: [PATCH 2/3] (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 +++++
 src/app/app.component.ts                      | 11 ++++-
 .../horizontal/style-1/style-1.component.scss | 13 ++++++
 .../components/navbar/navbar.component.scss   |  6 +--
 .../components/navbar/navbar.component.ts     | 44 ++++++++++++++++---
 .../vertical/style-1/style-1.component.scss   | 28 +++++++-----
 .../vertical/style-2/style-2.component.scss   | 28 +++++++-----
 .../layout-1/layout-1.component.html          |  2 +-
 .../layout-1/layout-1.component.scss          |  7 ---
 .../vertical/layout-1/layout-1.component.html |  2 +-
 .../vertical/layout-1/layout-1.component.scss |  7 ---
 .../vertical/layout-2/layout-2.component.html |  2 +-
 .../vertical/layout-2/layout-2.component.scss |  7 ---
 .../vertical/layout-3/layout-3.component.html |  2 +-
 .../vertical/layout-3/layout-3.component.scss |  7 ---
 .../changelog/changelog.component.html        |  1 +
 16 files changed, 113 insertions(+), 65 deletions(-)

diff --git a/src/@fuse/scss/partials/_global.scss b/src/@fuse/scss/partials/_global.scss
index c54af974..9a100ea6 100644
--- a/src/@fuse/scss/partials/_global.scss
+++ b/src/@fuse/scss/partials/_global.scss
@@ -10,4 +10,15 @@ body {
     padding: 0;
     overflow: hidden;
     background: #F5F5F5;
+}
+
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
 }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d70f0da7..cfae4916 100644
--- a/src/app/app.component.ts
+++ b/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');
+                }
             });
     }
 
diff --git a/src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss b/src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss
index 9a5630e2..3cc1a98d 100644
--- a/src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/app/layout/components/navbar/navbar.component.scss b/src/app/layout/components/navbar/navbar.component.scss
index e14eee3b..93609b0b 100644
--- a/src/app/layout/components/navbar/navbar.component.scss
+++ b/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%;
+
 }
diff --git a/src/app/layout/components/navbar/navbar.component.ts b/src/app/layout/components/navbar/navbar.component.ts
index c9544269..069ab5fb 100644
--- a/src/app/layout/components/navbar/navbar.component.ts
+++ b/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
-    @Input()
-    variant;
+    // Private
+    _variant: string;
 
     /**
      * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {Renderer2} _renderer
      */
-    constructor()
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    )
     {
-        // Set the defaults
-        this.variant = 'vertical-style-1';
+        // Set the private defaults
+        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);
     }
 }
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
index 136fdcc3..d8c24ee3 100644
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/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);
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
index 7637b741..198f1430 100644
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
+++ b/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);
-            }
-        }
-    }
 }
diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html
index e06ee6be..a4bac971 100644
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/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'">
diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.scss b/src/app/layout/horizontal/layout-1/layout-1.component.scss
index 878691cb..d75357ce 100644
--- a/src/app/layout/horizontal/layout-1/layout-1.component.scss
+++ b/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;
diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html
index 942a5b2b..86c3a798 100644
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/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'">
diff --git a/src/app/layout/vertical/layout-1/layout-1.component.scss b/src/app/layout/vertical/layout-1/layout-1.component.scss
index dd774c3e..617e5efe 100644
--- a/src/app/layout/vertical/layout-1/layout-1.component.scss
+++ b/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;
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 f4fd6dd1..9029b1de 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/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'">
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 329fc78b..a9f12cda 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.scss
+++ b/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;
diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html
index 9154e39d..25d11df6 100644
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/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'">
diff --git a/src/app/layout/vertical/layout-3/layout-3.component.scss b/src/app/layout/vertical/layout-3/layout-3.component.scss
index 27fdc08d..6627a7e9 100644
--- a/src/app/layout/vertical/layout-3/layout-3.component.scss
+++ b/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;
diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html
index 10e94685..b763c9da 100644
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/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>
 

From 798e2632bce365c8ee7c296c2d021eee9d3ae0ff Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 13 Jul 2018 18:58:02 +0300
Subject: [PATCH 3/3] Updated changelog

---
 .../documentation/changelog/changelog.component.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html
index b763c9da..0c9b800a 100644
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/src/app/main/documentation/changelog/changelog.component.html
@@ -26,7 +26,7 @@
 
                 <div class="title">
                     <span class="version">v6.2.4</span>
-                    <span class="date">(TBA)</span>
+                    <span class="date">(2018-07-14)</span>
                 </div>
 
                 <div class="groups">
@@ -51,11 +51,19 @@
                         </ul>
                     </div>
 
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Navbar) Moved navbar styles to the variants for better granular control</li>
+                        </ul>
+                    </div>
+
                     <div class="fixed">
                         <span class="title">Fixed</span>
                         <ul>
-                            <li>Scrolling is not smooth on iOS devices</li>
+                            <li>(Global) Scrolling is not smooth on iOS devices</li>
                             <li>(Horizontal Layout) Navbar covers the entire screen</li>
+                            <li>(Boxed Layout) Boxed layout has alignment issues</li>
                         </ul>
                     </div>