fix nav issue on small screen

robin hassan · robin hassan · commit 0f965360fade · 2019-04-11T15:54:48.000+08:00
diff --git a/src/app/shared/layouts/sidebar/sidebar.component.scss b/src/app/shared/layouts/sidebar/sidebar.component.scss
@@ -41,8 +41,8 @@
     }
 }
 
-@media (max-width:970px) {
-    .pages-sider {
-        width: 0;
-    }
-}
+//@media (max-width:970px) {
+//    .pages-sider {
+//        width: 0;
+//    }
+//}
diff --git a/src/app/shared/layouts/sidebar/sidebar.component.ts b/src/app/shared/layouts/sidebar/sidebar.component.ts
@@ -1,6 +1,6 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { menuService } from '../../services/menu.service';
-import { GlobalService } from '../../services/global.service';
+import {Component, Input, Output, EventEmitter, OnInit, HostListener} from '@angular/core';
+import {menuService} from '../../services/menu.service';
+import {GlobalService} from '../../services/global.service';
 
 @Component({
   selector: 'sidebar',
@@ -15,7 +15,8 @@ export class SidebarComponent implements OnInit {
   public sidebarToggle = true;
 
   constructor(private _menuService: menuService,
-    public _globalService: GlobalService) { }
+              public _globalService: GlobalService) {
+  }
 
   ngOnInit() {
     this.menuInfo = this._menuService.putSidebarJson();
@@ -57,4 +58,11 @@ export class SidebarComponent implements OnInit {
     }
   }
 
+
+  // detect window size and automatically hide the left side menu
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.sidebarToggle = window.innerWidth >= 970;
+  }
+
 }

Original file line number	Diff line number	Diff line change
`@@ -41,8 +41,8 @@`
`41`	`41`	`}`
`42`	`42`	`}`
`43`	`43`
`44`		`-@media (max-width:970px) {`
`45`		`- .pages-sider {`
`46`		`- width: 0;`
`47`		`- }`
`48`		`-}`
	`44`	`+//@media (max-width:970px) {`
	`45`	`+// .pages-sider {`
	`46`	`+// width: 0;`
	`47`	`+// }`
	`48`	`+//}`