From ee29f203040514533454c148d89ca5a4508fc7b5 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 30 Oct 2017 13:31:23 +0300
Subject: [PATCH 1/2] Added an ability to control the folded status of the
 vertical navigation via FuseConfig

---
 .../theme-options.component.html              |  6 +++++
 src/app/core/services/config.service.ts       |  9 ++++---
 src/app/main/main.component.html              |  4 +--
 .../vertical/navbar-vertical.component.ts     | 27 ++++++++++++++++---
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html
index 3d2c8698..16e4de6e 100644
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/app/core/components/theme-options/theme-options.component.html
@@ -21,6 +21,12 @@
             <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
         </mat-radio-group>
 
+        <h3>Navigation Fold (for vertical navigation):</h3>
+        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+                          (change)="onSettingsChange()">
+            Folded
+        </mat-slide-toggle>
+
         <h3 class="mt-24">Toolbar:</h3>
         <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
index 2335da84..d0ae7c2d 100644
--- a/src/app/core/services/config.service.ts
+++ b/src/app/core/services/config.service.ts
@@ -22,10 +22,11 @@ export class FuseConfigService
         // Set the default settings
         this.defaultSettings = {
             layout          : {
-                navigation: 'left', // 'right', 'left', 'top', 'none'
-                toolbar   : 'below', // 'above', 'below', 'none'
-                footer    : 'below', // 'above', 'below', 'none'
-                mode      : 'fullwidth' // 'boxed', 'fullwidth'
+                navigation      : 'left', // 'right', 'left', 'top', 'none'
+                navigationFolded: false, // true, false
+                toolbar         : 'below', // 'above', 'below', 'none'
+                footer          : 'below', // 'above', 'below', 'none'
+                mode            : 'fullwidth' // 'boxed', 'fullwidth'
             },
             colorClasses    : {
                 toolbar: 'mat-white-500-bg',
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 4155a298..00071a6c 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -18,7 +18,7 @@
         <div id="wrapper">
 
             <!-- NAVBAR: Left -->
-            <fuse-navbar-vertical [folded]="false"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="left-navbar"
                                   [class]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
@@ -44,7 +44,7 @@
             </div>
 
             <!-- NAVBAR: Right -->
-            <fuse-navbar-vertical [folded]="false"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="right-navbar"
                                   [class]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'right'">
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.ts b/src/app/main/navbar/vertical/navbar-vertical.component.ts
index e0d8aba7..4141c473 100644
--- a/src/app/main/navbar/vertical/navbar-vertical.component.ts
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.ts
@@ -18,13 +18,34 @@ import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/anim
 export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 {
     private _backdropElement: HTMLElement | null = null;
+    private _folded = false;
+
     @HostBinding('class.close') isClosed: boolean;
     @HostBinding('class.folded') isFoldedActive: boolean;
     @HostBinding('class.folded-open') isFoldedOpen: boolean;
     @HostBinding('class.initialized') initialized: boolean;
-    @Input('folded') foldedByDefault = false;
     @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
 
+    @Input()
+    set folded(value: boolean)
+    {
+        this._folded = value;
+
+        if ( this._folded )
+        {
+            this.activateFolded();
+        }
+        else
+        {
+            this.deActivateFolded();
+        }
+    }
+
+    get folded(): boolean
+    {
+        return this._folded;
+    }
+
     matchMediaWatcher: Subscription;
     navigationServiceWatcher: Subscription;
     fusePerfectScrollbarUpdateTimeout;
@@ -88,7 +109,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
     ngOnInit()
     {
         this.isClosed = false;
-        this.isFoldedActive = this.foldedByDefault;
+        this.isFoldedActive = this._folded;
         this.isFoldedOpen = false;
         this.initialized = false;
         this.updateCssClasses();
@@ -104,7 +125,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         }
         else
         {
-            if ( !this.foldedByDefault )
+            if ( !this._folded )
             {
                 this.deActivateFolded();
             }

From 1934bad3eba9eafd380ef82a1475973f64ae1d29 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 31 Oct 2017 10:06:49 +0300
Subject: [PATCH 2/2] Fixes #33: Toolbar navigation bar button should toggle
 the navigation bar

---
 .../main/navbar/vertical/navbar-vertical.component.ts  | 10 ++++++++++
 src/app/main/toolbar/toolbar.component.html            |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.ts b/src/app/main/navbar/vertical/navbar-vertical.component.ts
index 4141c473..10dca8ad 100644
--- a/src/app/main/navbar/vertical/navbar-vertical.component.ts
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.ts
@@ -145,6 +145,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     openBar()
     {
+        if ( !this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = false;
         this.updateCssClasses();
         if ( this.media.isActive('lt-lg') )
@@ -155,6 +160,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     closeBar()
     {
+        if ( this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = true;
         this.updateCssClasses();
         this._detachBackdrop();
diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html
index 93b1f3ca..940c5f03 100644
--- a/src/app/main/toolbar/toolbar.component.html
+++ b/src/app/main/toolbar/toolbar.component.html
@@ -7,7 +7,7 @@
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    fuseNavbarVertical="openBar" fxHide.gt-md>
+                    fuseNavbarVertical="toggleBar" fxHide.gt-md>
                 <mat-icon>menu</mat-icon>
             </button>