From 081a94eab2b5531470e111dce8df6a6dfbe962f6 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Thu, 28 Apr 2016 17:52:30 +0300
Subject: [PATCH] on window resize re calculate width to collapse sidebar

---
 src/app/theme/sidebar/sidebar.component.ts | 22 +++++++++++++++++++++-
 src/app/theme/theme.constants.ts           |  5 +++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/app/theme/sidebar/sidebar.component.ts b/src/app/theme/sidebar/sidebar.component.ts
index 77bfc3af..9b8e3e44 100644
--- a/src/app/theme/sidebar/sidebar.component.ts
+++ b/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;
   }
diff --git a/src/app/theme/theme.constants.ts b/src/app/theme/theme.constants.ts
index 1251028f..991b1e4e 100644
--- a/src/app/theme/theme.constants.ts
+++ b/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,