fix: adapt to mobie view

package.json

@@ -51,6 +51,7 @@
     "nebular-icons": "^1.1.0",
     "ng2-charts": "^2.3.2",
     "ngx-easy-table": "^12.0.0",
+    "ngx-responsive": "^9.0.3",
     "popper.js": "^1.16.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.13.0",

src/app/app.module.ts

@@ -9,6 +9,7 @@ import {
 	NbThemeModule,
 	NbToastrModule,
 } from '@nebular/theme';
+import { ResponsiveModule } from 'ngx-responsive';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -18,6 +19,7 @@ import { AppComponent } from './app.component';
 		BrowserModule,
 		AppRoutingModule,
 		BrowserAnimationsModule,
+		ResponsiveModule.forRoot(),
 		NbThemeModule.forRoot({ name: 'default' }),
 		NbMenuModule.forRoot(),
 		NbDialogModule.forRoot({ autoFocus: true, closeOnEsc: true }),

src/app/pages/dashboard/dashboard.component.ts

@@ -8,7 +8,7 @@ import { ConnectionService } from '../connection.service';
 @Component({
 	selector: 'app-dashboard',
 	template: `
-		<div class="container">
+		<div class="container-fluid">
 			<div class="row">
 				<div class="col">
 					<nb-card><nb-card-body>tutorial</nb-card-body></nb-card>

src/app/pages/dashboard/dashboard.module.ts

@@ -9,6 +9,7 @@ import {
 	NbTabsetModule,
 } from '@nebular/theme';
 import { ChartsModule } from 'ng2-charts';
+import { ResponsiveModule } from 'ngx-responsive';
 import { RngModule } from '../../components/rng.module';
 import { DashboardRoutingModule } from './dashboard-routing.module';
 import { DashboardComponent } from './dashboard.component';
@@ -17,6 +18,7 @@ import { DashboardComponent } from './dashboard.component';
 	declarations: [DashboardComponent],
 	imports: [
 		CommonModule,
+		ResponsiveModule,
 		DashboardRoutingModule,
 		NbCardModule,
 		NbButtonModule,

src/app/pages/pages.component.ts

@@ -1,20 +1,27 @@
 import { Component, OnInit } from '@angular/core';
 import { NbMenuItem, NbSidebarService } from '@nebular/theme';
+import { ResponsiveSizeInfoRx } from 'ngx-responsive';
 import { CurrentUserService } from './current-user.service';
 import { MENU_ITEMS } from './pages-menu';
 
 @Component({
 	selector: 'app-rng-pages',
 	template: `
-		<nb-layout [withScroll]="false">
+		<nb-layout [withScroll]="false" [responsive-window]="'pages'">
 			<nb-layout-header fixed>
 				<nb-actions>
-					<nb-action icon="menu-outline" (click)="toggleNav()"></nb-action>
+					<nb-action
+						icon="menu-outline"
+						(click)="toggleNav()"
+						*hideItBootstrap="['lg', 'xl']"
+					></nb-action>
 					<nb-action> <img src="./assets/favicon.svg" style="height: 3rem;" /> </nb-action>
 				</nb-actions>
 			</nb-layout-header>
 
-			<nb-sidebar class="main-sidebar" tag="nav"><nb-menu [items]="menu"> </nb-menu></nb-sidebar>
+			<nb-sidebar class="main-sidebar" tag="nav" [fixed]="mainSideBarFixed">
+				<nb-menu [items]="menu"> </nb-menu>
+			</nb-sidebar>
 
 			<nb-layout-column class="colored-column-basic basic-contant" style="padding: 0;">
 				<router-outlet></router-outlet>
@@ -30,16 +37,30 @@ import { MENU_ITEMS } from './pages-menu';
 	],
 })
 export class PagesComponent implements OnInit {
-	menu = MENU_ITEMS;
 	constructor(
 		private sidebarService: NbSidebarService,
-		private currUserService: CurrentUserService
-	) {}
+		private currUserService: CurrentUserService,
+		private resp: ResponsiveSizeInfoRx
+	) {
+		resp.connect();
+	}
+	menu = MENU_ITEMS;
+
+	respSize = 'lg';
+	mainSideBarFixed = false;
 
 	toggleNav() {
-		this.sidebarService.toggle(true, 'nav');
+		this.sidebarService.toggle(false, 'nav');
 	}
+
 	ngOnInit(): void {
+		this.resp.getResponsiveSize.subscribe(data => {
+			this.respSize = data;
+
+			this.mainSideBarFixed = data === 'xs' || data === 'sm' || data === 'md';
+			if (!this.mainSideBarFixed) this.sidebarService.expand('nav');
+			else this.sidebarService.collapse('nav');
+		});
 		this.currUserService.currentUserFlow$.getSupersetOutput().subscribe(node => {
 			if (node[1].length !== 0) return;
 			const userGroup = this.menu[0];

src/app/pages/pages.module.ts

@@ -3,13 +3,15 @@ import { NgModule } from '@angular/core';
 
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { NbActionsModule, NbLayoutModule, NbMenuModule, NbSidebarModule } from '@nebular/theme';
+import { ResponsiveModule } from 'ngx-responsive';
 import { PagesRoutingModule } from './pages-routing.module';
 import { PagesComponent } from './pages.component';
 
 @NgModule({
 	declarations: [PagesComponent],
 	imports: [
 		CommonModule,
+		ResponsiveModule,
 		PagesRoutingModule,
 		NbLayoutModule,
 		NbActionsModule,