layout arrange

src/app/commons/layouts/sub-menubar/sub-menubar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
@@ -8,11 +8,7 @@ import { Router } from '@angular/router';
 })
 export class SubMenubarComponent implements OnInit {
 
-  tabs  = [
-    {label: 'Probe', path: '/probes'},
-    {label: 'Unauthorized', path: '/probes/noauth'},
-    {label: 'Download', path: '/probes/download'},
-  ];
+  @Input() tabs: any;
 
   constructor(public router: Router) { }
 

src/app/pages/pages.component.html

@@ -26,7 +26,7 @@
                 <of-header [sidenav]="sidenav" [drawer]="drawer" [sidebar]="sidenav2" [matDrawerShow]="matDrawerShow" style="z-index: 500"></of-header>
 
                 <perfect-scrollbar style="height: calc(100% - 33px);">
-                    <div style="height: 100%;">
+                    <div style="height: 100%; padding: 0px 10px 0px 10px">
                         <router-outlet #route="outlet"></router-outlet>
                     </div>
                 </perfect-scrollbar>

src/app/pages/pages.component.ts

@@ -1,11 +1,12 @@
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 
 @Component({
   selector: 'of-pages',
   templateUrl: './pages.component.html',
   styleUrls: ['./pages.component.scss']
 })
-export class PagesComponent implements OnInit {
+export class PagesComponent implements OnInit, OnChanges {
 
   @Input() isVisible = true;
   visibility = 'shown';
@@ -15,13 +16,39 @@ export class PagesComponent implements OnInit {
   matDrawerShow = true;
   sideNavMode = 'side';
 
-  constructor() { }
+  constructor(private media: ObservableMedia) { }
 
   ngOnInit() {
+    this.media.subscribe((mediaChange: MediaChange) => {
+      this.toggleView();
+    });
+  }
 
+  ngOnChanges() {
+    this.visibility = this.isVisible ? 'shown' : 'hidden';
   }
 
   getRouteAnimation(outlet) {
     return outlet.activatedRouteData.animation;
   }
+
+  toggleView() {
+    if (this.media.isActive('gt-md')) {
+      this.sideNavMode = 'side';
+      this.sideNavOpened = true;
+      this.matDrawerOpened = false;
+      this.matDrawerShow = true;
+    } else if (this.media.isActive('gt-xs')) {
+      this.sideNavMode = 'side';
+      this.sideNavOpened = false;
+      this.matDrawerOpened = true;
+      this.matDrawerShow = true;
+    } else if (this.media.isActive('lt-sm')) {
+      this.sideNavMode = 'over';
+      this.sideNavOpened = false;
+      this.matDrawerOpened = false;
+      this.matDrawerShow = false;
+    }
+  }
+
 }

src/app/pages/probes/probes-page.component.html

@@ -1,4 +1,4 @@
 <div>
-  <of-sub-menubar></of-sub-menubar>
+  <of-sub-menubar [tabs]="tabs"></of-sub-menubar>
   <router-outlet></router-outlet>
 </div>

src/app/pages/probes/probes-page.component.ts

@@ -7,6 +7,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProbesPageComponent implements OnInit {
 
+  tabs = [
+    { label: 'Probe', path: '/probes' },
+    { label: 'Unauthorized', path: '/probes/noauth' },
+    { label: 'Download', path: '/probes/download' },
+  ];
+
   constructor() { }
 
   ngOnInit() {