diff --git a/src/app/pages/layout.service.spec.ts b/src/app/pages/layout.service.spec.ts
new file mode 100644
index 0000000..3622fff
--- /dev/null
+++ b/src/app/pages/layout.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { async, inject, TestBed } from '@angular/core/testing';
+import { LayoutService } from './layout.service';
+
+describe('Service: Layout', () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			providers: [LayoutService],
+		});
+	});
+
+	it('should ...', inject([LayoutService], (service: LayoutService) => {
+		expect(service).toBeTruthy();
+	}));
+});
diff --git a/src/app/pages/layout.service.ts b/src/app/pages/layout.service.ts
new file mode 100644
index 0000000..c1c7abd
--- /dev/null
+++ b/src/app/pages/layout.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { NbSidebarComponent } from '@nebular/theme';
+import { mainModule } from 'process';
+import { Observable, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { CombErr, NothingFlow } from '../@dataflow/core';
+
+export enum SidebarStatus {
+	None,
+	Icon,
+	Full,
+}
+
+/**
+ * @description provide some information to archive responsive view
+ * @class LayoutService
+ */
+@Injectable({
+	providedIn: 'root',
+})
+export class LayoutService {
+	mainSidebarTrigger = new Subject<SidebarStatus>();
+	// TODO: use it to replace other place
+	mainSidebar$: NothingFlow<SidebarStatus>;
+	constructor() {
+		const outer = this;
+		this.mainSidebar$ = new (class extends NothingFlow<SidebarStatus> {
+			public prerequest$: Observable<CombErr<SidebarStatus>> = outer.mainSidebarTrigger.pipe(
+				map(x => [x, []])
+			);
+		})();
+		this.mainSidebar$.deploy();
+		this.mainSidebar$.getOutput().subscribe();
+	}
+}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index d9ac324..d2402b2 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import { NbMenuItem, NbSidebarService } from '@nebular/theme';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NbMenuItem, NbSidebarComponent, NbSidebarService } from '@nebular/theme';
 import { HumanizeDuration } from 'humanize-duration-ts';
 import { ResponsiveSizeInfoRx } from 'ngx-responsive';
 import { langService } from '../utils/format-duration';
 import { ConnectionService } from './connection.service';
 import { CurrentUserService } from './current-user.service';
+import { LayoutService, SidebarStatus } from './layout.service';
 import { MENU_ITEMS } from './pages-menu';
 
 @Component({
@@ -61,7 +62,8 @@ export class PagesComponent implements OnInit {
 		private sidebarService: NbSidebarService,
 		private currUserService: CurrentUserService,
 		private rstService: ConnectionService,
-		private resp: ResponsiveSizeInfoRx
+		private resp: ResponsiveSizeInfoRx,
+		private layoutService: LayoutService
 	) {
 		resp.connect();
 	}
@@ -71,8 +73,22 @@ export class PagesComponent implements OnInit {
 
 	currUser = '';
 
+	@ViewChild(NbSidebarComponent, { static: true }) nav: NbSidebarComponent;
+
 	toggleNav() {
 		this.sidebarService.toggle(false, 'nav');
+		this.updateLayout();
+	}
+
+	private updateLayout() {
+		const status: SidebarStatus = this.mainSideBarFixed
+			? SidebarStatus.None
+			: this.nav.collapsed
+			? SidebarStatus.None
+			: this.nav.expanded
+			? SidebarStatus.Full
+			: SidebarStatus.Icon;
+		this.layoutService.mainSidebarTrigger.next(status);
 	}
 
 	ngOnInit(): void {
@@ -80,6 +96,7 @@ export class PagesComponent implements OnInit {
 			this.mainSideBarFixed = data === 'xs' || data === 'sm' || data === 'md';
 			if (!this.mainSideBarFixed) this.sidebarService.expand('nav');
 			else this.sidebarService.collapse('nav');
+			this.updateLayout();
 		});
 		this.currUserService.currentUserFlow$.getSupersetOutput().subscribe(node => {
 			if (node[1].length !== 0) return;