Update the version on changelog navigation item

Updated the changelog

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
-                    // 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
      *

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>

src/app/main/documentation/changelog/changelog.component.html

@@ -19,6 +19,32 @@
 
         <div class="changelog">
 
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.1.1 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.1.1</span>
+                    <span class="date">(2018-06-17)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>
+                                (Fuse Sidebar) Folded status doesn't work correctly when there are multiple instances
+                            </li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+
             <!-- --------------------------------------------------------------------------------------------- -->
             <!-- @ v6.1.0 -->
             <!-- --------------------------------------------------------------------------------------------- -->
@@ -26,7 +52,7 @@
 
                 <div class="title">
                     <span class="version">v6.1.0</span>
-                    <span class="date">(2018-06-xx)</span>
+                    <span class="date">(2018-06-16)</span>
                 </div>
 
                 <div class="groups">

src/app/main/documentation/components/sidebar/sidebar.component.html

@@ -27,7 +27,7 @@
         <p class="py-8">
             <fuse-highlight lang="html">
                 <textarea #source>
-                    <fuse-sidebar [name]="'navbar'" [folded]="someSetting.isFolded" [lockedOpen]="'gt-md'"></fuse-sidebar>
+                    <fuse-sidebar name="navbar" [folded]="someSetting.isFolded" lockedOpen="gt-md"></fuse-sidebar>
                 </textarea>
             </fuse-highlight>
         </p>

src/app/navigation/navigation.ts

@@ -849,7 +849,7 @@ export const navigation: FuseNavigation[] = [
                 icon : 'update',
                 url  : '/documentation/changelog',
                 badge: {
-                    title: '6.1.0',
+                    title: '6.1.1',
                     bg   : '#EC0C8E',
                     fg   : '#FFFFFF'
                 }