refactor(default-layout): drop MutationObserver, add minimizedChange event

Author: xidedix

src/app/containers/default-layout/default-layout.component.html

@@ -49,8 +49,8 @@
   </ul>
 </app-header>
 <div class="app-body">
-  <app-sidebar [fixed]="true" [display]="'lg'">
-    <app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="sidebarMinimized"></app-sidebar-nav>
+  <app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized" (minimizedChange)="toggleMinimize($event)">
+    <app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="appSidebar.minimized"></app-sidebar-nav>
     <app-sidebar-minimizer></app-sidebar-minimizer>
   </app-sidebar>
   <!-- Main content -->
@@ -83,7 +83,7 @@
       <router-outlet></router-outlet>
     </div><!-- /.container-fluid -->
   </main>
-  <app-aside [fixed]="true" [display]="false">
+  <app-aside [fixed]="true" [display]="false" [ngClass]="'test'">
     <tabset>
       <tab>
         <ng-template tabHeading><i class="icon-list"></i></ng-template>

src/app/containers/default-layout/default-layout.component.ts

@@ -1,30 +1,16 @@
-import { Component, OnDestroy, Inject } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import {Component } from '@angular/core';
 import { navItems } from '../../_nav';
 
-
 @Component({
   selector: 'app-dashboard',
   templateUrl: './default-layout.component.html'
 })
-export class DefaultLayoutComponent implements OnDestroy {
+export class DefaultLayoutComponent {
+  public sidebarMinimized = false;
   public navItems = navItems;
-  public sidebarMinimized = true;
-  private changes: MutationObserver;
-  public element: HTMLElement;
-  constructor(@Inject(DOCUMENT) _document?: any) {
-
-    this.changes = new MutationObserver((mutations) => {
-      this.sidebarMinimized = _document.body.classList.contains('sidebar-minimized');
-    });
-    this.element = _document.body;
-    this.changes.observe(<Element>this.element, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-  }
 
-  ngOnDestroy(): void {
-    this.changes.disconnect();
+  toggleMinimize(e) {
+    this.sidebarMinimized = e;
+    console.log('toggleMinimize', e, this.sidebarMinimized);
   }
 }