Merge branch 'master' into skeleton

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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",

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<any>;
@@ -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
+                    // If the sidebar was folded, forcefully fold it again
-                    // and fold the sidebar if it's true
+                    if ( this._wasFolded )
-                    if ( this._fuseConfig.layout.navbar.folded )
                     {
-                        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
      *

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

@@ -56,7 +56,7 @@
 </div>
 
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -91,7 +91,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>

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

@@ -68,7 +68,7 @@
 </div>
 
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -93,9 +93,9 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar"
                   [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
@@ -104,9 +104,9 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar [name]="'navbar'" position="right"
+    <fuse-sidebar name="navbar" position="right"
                   [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>

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

@@ -68,7 +68,7 @@
 </div>
 
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -93,9 +93,9 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar"
                   [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
@@ -104,9 +104,9 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar [name]="'navbar'" position="right"
+    <fuse-sidebar name="navbar" position="right"
                   [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>

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

@@ -54,7 +54,7 @@
 </div>
 
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -79,9 +79,9 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar"
                   [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>
@@ -90,9 +90,9 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar [name]="'navbar'" position="right"
+    <fuse-sidebar name="navbar" position="right"
                   [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
     </fuse-sidebar>