Added 'openedChanged' and 'foldedChanged' events to the sidebar

Updated the Sidebar docs

src/@fuse/components/sidebar/sidebar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
@@ -48,6 +48,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @Input()
     invisibleOverlay: boolean;
 
+    // Folded changed
+    @Output()
+    foldedChanged: EventEmitter<boolean>;
+
+    // Opened changed
+    @Output()
+    openedChanged: EventEmitter<boolean>;
+
     // Private
     private _folded: boolean;
     private _fuseConfig: any;
@@ -84,8 +92,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     )
     {
         // Set the defaults
+        this.foldedChanged = new EventEmitter();
+        this.openedChanged = new EventEmitter();
         this.opened = false;
-        // this.folded = false;
         this.position = 'left';
         this.invisibleOverlay = false;
 
@@ -157,6 +166,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             this._renderer.removeStyle(sibling, styleRule);
             this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
         }
+
+        // Emit the 'foldedChanged' event
+        this.foldedChanged.emit(this.folded);
     }
 
     get folded(): boolean
@@ -301,6 +313,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                     // Force the the opened status to true
                     this.opened = true;
 
+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
                     // If the sidebar was folded, forcefully fold it again
                     if ( this._wasFolded )
                     {
@@ -329,6 +344,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                     // Force the the opened status to close
                     this.opened = false;
 
+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
                     // Hide the sidebar
                     this._hideSidebar();
                 }
@@ -558,6 +576,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Set the opened status
         this.opened = true;
 
+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
@@ -581,6 +602,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Set the opened status
         this.opened = false;
 
+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
         // Hide the sidebar
         this._hideSidebar();
 

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

@@ -33,7 +33,7 @@
         </p>
 
         <div class="my-48">
-            <h2>[name]</h2>
+            <h3><code>[name]</code></h3>
             <p class="py-8">
                 <b>name</b> attribute allows you to set a unique name to the sidebar. It's required for sidebar to
                 work correctly, as every sidebar being registered to the sidebar service.
@@ -41,14 +41,14 @@
         </div>
 
         <div class="my-48">
-            <h2>[folded]</h2>
+            <h3><code>[folded]</code></h3>
             <p class="py-8">
                 Controls the folded status of the sidebar.
             </p>
         </div>
 
         <div class="my-48">
-            <h2>[position]</h2>
+            <h3><code>[position]</code></h3>
             <p class="py-8">
                 Controls the position of the sidebar when it's hidden. This doesn't affect on the locked-open placement
                 of the sidebar, it only controls which side the sidebar is going to slide in when it's completely
@@ -57,13 +57,27 @@
         </div>
 
         <div class="my-48">
-            <h2>[lockedOpen]</h2>
+            <h3><code>[lockedOpen]</code></h3>
             <p class="py-8">
                 Accepts Angular Material breakpoint aliases ('gt-md', 'lg' etc.) and locks open the sidebar if the
                 alias matches the current breakpoint, similar to how Angular Material 1.x sidenav works.
             </p>
         </div>
 
+        <div class="my-48">
+            <h3><code>(onFoldedChanged)</code></h3>
+            <p class="py-8">
+                <b>onFoldedChanged</b> event will be triggered when the sidebar folded or unfolded permanently.
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h3><code>(onOpenedChanged)</code></h3>
+            <p class="py-8">
+                <b>onOpenedChanged</b> event will be triggered when the sidebar opened or closed.
+            </p>
+        </div>
+
         <div class="section-title">Sidebar Service</div>
         <p class="py-8">
             The sidebar service allows you to control the Sidebar's states from anywhere. To access the sidebar,