on window resize re calculate width to collapse sidebar

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

@@ -1,5 +1,6 @@
-import {Component, ElementRef} from 'angular2/core';
+import {Component, ElementRef, HostListener} from 'angular2/core';
 
+import {layoutSizes} from '../theme.constants';
 import {SidebarService} from './sidebar.service';
 import {Router} from 'angular2/router';
 
@@ -23,6 +24,8 @@ export class Sidebar {
   hoverElemHeight: number;
   hoverElemTop: number;
 
+  isMenuShouldCollapsed: boolean = false;
+
   constructor(el: ElementRef, router: Router, private _sidebarService: SidebarService) {
     this.elementRef = el;
     this.router = router;
@@ -39,6 +42,23 @@ export class Sidebar {
     this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
   }
 
+  @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.isMenuShouldCollapsed = isMenuShouldCollapsed;
+  }
+
   menuExpand () {
     this.isMenuCollapsed = false;
   }

src/app/theme/theme.constants.ts

@@ -1,5 +1,10 @@
 export const IMAGES_ROOT = 'assets/img/';
 
+export const layoutSizes = {
+  resWidthCollapseSidebar: 1200,
+  resWidthHideSidebar: 500
+};
+
 export const layoutPaths = {
   images: {
     root: IMAGES_ROOT,