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 @@
None
+
Navigation Fold (for vertical navigation):
+
+ Folded
+
+
Toolbar:
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 @@
-
@@ -44,7 +44,7 @@
-
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.ts b/src/app/main/navbar/vertical/navbar-vertical.component.ts
index e0d8aba7..10dca8ad 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();
}
@@ -124,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') )
@@ -134,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 @@