menu collapsed state implemented using observer

src/app/app.component.ts

@@ -3,6 +3,9 @@
  */
 import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
+import {Subscription} from 'rxjs/Subscription';
+
+import {SidebarStateService} from './theme/sidebar/sidebarState.service';
 
 import {Pages} from './pages';
 
@@ -17,14 +20,14 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
 @Component({
   selector: 'app',
   pipes: [ ],
-  providers: [ ],
+  providers: [SidebarStateService],
   encapsulation: ViewEncapsulation.None,
   styles: [ require('normalize.css'), require('./app.scss') ],
   template: `
     <header>
     </header>
 
-    <main>
+    <main [ngClass]="{'menu-collapsed': isMenuCollapsed}">
       <router-outlet></router-outlet>
     </main>
 
@@ -45,13 +48,23 @@ export class App {
   angularclassLogo = 'assets/img/angularclass-avatar.png';
   name = 'Angular 2 Webpack Starter';
   url = 'https://twitter.com/AngularClass';
+  isMenuCollapsed: boolean = false;
 
-  constructor() {}
+  private _sidebarStateSubscription: Subscription;
+
+  constructor(private _sidebarStateService:SidebarStateService) {
+    this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
+  }
 
   ngOnInit() {
     console.log('Initial App State');
   }
 
+  ngOnDestroy(){
+    // prevent memory leak when component destroyed
+    this._sidebarStateSubscription.unsubscribe();
+  }
+
 }
 
 /*

src/app/theme/sidebar/sidebar.component.ts

@@ -1,8 +1,9 @@
 import {Component, ElementRef, HostListener} from 'angular2/core';
+import {Router} from 'angular2/router';
 
 import {layoutSizes} from '../theme.constants';
 import {SidebarService} from './sidebar.service';
-import {Router} from 'angular2/router';
+import {SidebarStateService} from './sidebarState.service';
 
 @Component({
     selector: 'sidebar',
@@ -13,8 +14,6 @@ import {Router} from 'angular2/router';
     pipes: []
 })
 export class Sidebar {
-  elementRef: ElementRef;
-  router: Router;
 
   menuItems: Array<any>;
   menuHeight: number;
@@ -26,9 +25,8 @@ export class Sidebar {
 
   isMenuShouldCollapsed: boolean = false;
 
-  constructor(el: ElementRef, router: Router, private _sidebarService: SidebarService) {
-    this.elementRef = el;
-    this.router = router;
+  constructor(private elementRef: ElementRef, private router: Router, private _sidebarService: SidebarService, private _sidebarStateService: SidebarStateService) {
+
     this.menuItems = this._sidebarService.getMenuItems();
   }
 
@@ -38,42 +36,46 @@ export class Sidebar {
 
   // TODO: is it really the best event for this kind of things?
   ngAfterViewInit() {
-    // TODO: get rid of magic 84 constant
-    this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
+    this.updateSidebarHeight();
   }
 
   @HostListener('window:resize', ['$event'])
   onWindowResize($event) {
 
     var isMenuShouldCollapsed = $event.target.innerWidth <= layoutSizes.resWidthCollapseSidebar;
-    var scopeApplied = false;
 
     if (this.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
-      this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
-      this.isMenuCollapsed = isMenuShouldCollapsed;
-      scopeApplied = true;
-    }
-    if (!scopeApplied) {
-      this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
+      this.menuCollapseStateChange(isMenuShouldCollapsed);
     }
     this.isMenuShouldCollapsed = isMenuShouldCollapsed;
+    this.updateSidebarHeight();
   }
 
   menuExpand () {
-    this.isMenuCollapsed = false;
+    this.menuCollapseStateChange(false);
   }
 
   menuCollapse () {
-    this.isMenuCollapsed = true;
+    this.menuCollapseStateChange(true);
   }
 
-  hoverItem = function ($event) {
+  menuCollapseStateChange(isCollapsed) {
+    this.isMenuCollapsed = isCollapsed;
+    this._sidebarStateService.stateChanged(this.isMenuCollapsed);
+  }
+
+  hoverItem ($event) {
     this.showHoverElem = true;
     this.hoverElemHeight =  $event.currentTarget.clientHeight;
     // TODO: get rid of magic 66 constant
     this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
   }
 
+  updateSidebarHeight() {
+    // TODO: get rid of magic 84 constant
+    this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
+  }
+
   toggleSubMenu ($event, item) {
     var submenu = $($event.currentTarget).next();
 

src/app/theme/sidebar/sidebarState.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from 'angular2/core'
+import {Subject}    from 'rxjs/Subject';
+
+@Injectable()
+export class SidebarStateService {
+
+  // Observable string sources
+  private _isCollapsed = new Subject<boolean>();
+
+  // Observable string streams
+  isCollapsedStream$ = this._isCollapsed.asObservable();
+
+  // Service message commands
+  stateChanged(isCollapsed: boolean) {
+    this._isCollapsed.next(isCollapsed)
+  }
+
+  getStateStream() {
+    return this.isCollapsedStream$;
+  }
+}