diff --git a/package-lock.json b/package-lock.json index 5f7f5482..230fe206 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fuse", - "version": "6.1.0", + "version": "6.1.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index db81e5da..380e0ad2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fuse", - "version": "6.1.0", + "version": "6.1.1", "license": "https://themeforest.net/licenses/terms/regular", "scripts": { "ng": "ng", diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index 96dcadd3..02d3e7ce 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -2,11 +2,11 @@ import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, In import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { ObservableMedia } from '@angular/flex-layout'; import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/internal/operators'; import { FuseSidebarService } from './sidebar.service'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; import { FuseConfigService } from '@fuse/services/config.service'; -import { takeUntil } from 'rxjs/internal/operators'; @Component({ selector : 'fuse-sidebar', @@ -20,6 +20,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy @Input() name: string; + // Key + @Input() + key: string; + // Position @Input() position: 'left' | 'right'; @@ -48,6 +52,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy private _folded: boolean; private _fuseConfig: any; private _wasActive: boolean; + private _wasFolded: boolean; private _backdrop: HTMLElement | null = null; private _player: AnimationPlayer; private _unsubscribeAll: Subject; @@ -79,13 +84,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy ) { // Set the defaults - this.folded = false; this.opened = false; + // this.folded = false; this.position = 'left'; this.invisibleOverlay = false; // Set the private defaults this._animationsEnabled = false; + this._folded = false; this._unsubscribeAll = new Subject(); } @@ -94,19 +100,18 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // ----------------------------------------------------------------------------------------------------- // Folded - @HostBinding('class.folded') @Input() set folded(value: boolean) { - // Only work if the sidebar is not closed + // Set the folded + this._folded = value; + + // Return if the sidebar is closed if ( !this.opened ) { return; } - // Set the folded - this._folded = value; - // Programmatically add/remove margin to the element // that comes after or before based on the position let sibling, @@ -135,14 +140,22 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // If folded... if ( value ) { - // Set the style + // Fold the sidebar + this.fold(); + + // Set the style and class this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase); + this._renderer.addClass(this._elementRef.nativeElement, 'folded'); } // If unfolded... else { - // Remove the style + // Unfold the sidebar + this.unfold(); + + // Remove the style and class this._renderer.removeStyle(sibling, styleRule); + this._renderer.removeClass(this._elementRef.nativeElement, 'folded'); } } @@ -178,6 +191,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Setup lockedOpen this._setupLockedOpen(); + + // Setup folded + this._setupFolded(); } /** @@ -253,6 +269,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the wasActive for the first time this._wasActive = false; + // Set the wasFolded + this._wasFolded = this.folded; + // Show the sidebar this._showSidebar(); @@ -282,11 +301,17 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Force the the opened status to true this.opened = true; - // Read the folded setting from the config - // and fold the sidebar if it's true - if ( this._fuseConfig.layout.navbar.folded ) + // If the sidebar was folded, forcefully fold it again + if ( this._wasFolded ) { - this.fold(); + // Enable the animations + this._enableAnimations(); + + // Fold + this.folded = true; + + // Mark for check + this._changeDetectorRef.markForCheck(); } // Hide the backdrop if any exists @@ -313,6 +338,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy }); } + /** + * Setup the initial folded status + * + * @private + */ + private _setupFolded(): void + { + // Return, if sidebar is not folded + if ( !this.folded ) + { + return; + } + + // Return if the sidebar is closed + if ( !this.opened ) + { + return; + } + + // Programmatically add/remove margin to the element + // that comes after or before based on the position + let sibling, + styleRule; + + const styleValue = '64px'; + + // Get the sibling and set the style rule + if ( this.position === 'left' ) + { + sibling = this._elementRef.nativeElement.nextElementSibling; + styleRule = 'margin-left'; + } + else + { + sibling = this._elementRef.nativeElement.previousElementSibling; + styleRule = 'margin-right'; + } + + // If there is no sibling, return... + if ( !sibling ) + { + return; + } + + // Fold the sidebar + this.fold(); + + // Set the style and class + this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase); + this._renderer.addClass(this._elementRef.nativeElement, 'folded'); + } + /** * Show the backdrop * 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 aa7ab758..1795eb96 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.html +++ b/src/app/layout/horizontal/layout-1/layout-1.component.html @@ -56,7 +56,7 @@ - + @@ -91,7 +91,7 @@ - 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 e6b32e29..2d6dd0a9 100644 --- a/src/app/layout/vertical/layout-1/layout-1.component.html +++ b/src/app/layout/vertical/layout-1/layout-1.component.html @@ -68,7 +68,7 @@ - + @@ -93,9 +93,9 @@ - @@ -104,9 +104,9 @@ - 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 6eb66b31..8e03dc7e 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -68,7 +68,7 @@ - + @@ -93,9 +93,9 @@ - @@ -104,9 +104,9 @@ - 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 f6468ccc..c7e8c0de 100644 --- a/src/app/layout/vertical/layout-3/layout-3.component.html +++ b/src/app/layout/vertical/layout-3/layout-3.component.html @@ -54,7 +54,7 @@ - + @@ -79,9 +79,9 @@ - @@ -90,9 +90,9 @@ -