webapp/src/app/@theme/layouts/sample/sample.layout.ts

   1 import { Component, OnDestroy } from '@angular/core';
   2 import {
   3   NbMediaBreakpoint,
   4   NbMediaBreakpointsService,
   5   NbMenuItem,
   6   NbMenuService,
   7   NbSidebarService,
   8   NbThemeService,
   9 } from '@nebular/theme';
  10
  11 import { StateService } from '../../../@core/data/state.service';
  12
  13 import { Subscription } from 'rxjs/Subscription';
  14 import 'rxjs/add/operator/withLatestFrom';
  15 import 'rxjs/add/operator/delay';
  16
  17 // TODO: move layouts into the framework
  18 @Component({
  19   selector: 'ngx-sample-layout',
  20   styleUrls: ['./sample.layout.scss'],
  21   template: `
  22     <nb-layout [center]="layout.id === 'center-column'" windowMode>
  23       <nb-layout-header fixed>
  24         <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
  25       </nb-layout-header>
  26
  27       <nb-sidebar class="menu-sidebar"
  28                    tag="menu-sidebar"
  29                    responsive
  30                    [right]="sidebar.id === 'right'">
  31         <nb-sidebar-header>
  32           <a href="#" class="btn btn-hero-success main-btn">
  33             <i class="ion ion-social-github"></i> <span>Support Us</span>
  34           </a>
  35         </nb-sidebar-header>
  36         <ng-content select="nb-menu"></ng-content>
  37       </nb-sidebar>
  38
  39       <nb-layout-column class="main-content">
  40         <ng-content select="router-outlet"></ng-content>
  41       </nb-layout-column>
  42
  43       <nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
  44         <nb-menu [items]="subMenu"></nb-menu>
  45       </nb-layout-column>
  46
  47       <nb-layout-column right class="small" *ngIf="layout.id === 'three-column'">
  48         <nb-menu [items]="subMenu"></nb-menu>
  49       </nb-layout-column>
  50
  51       <nb-layout-footer fixed>
  52         <ngx-footer></ngx-footer>
  53       </nb-layout-footer>
  54
  55       <nb-sidebar class="settings-sidebar"
  56                    tag="settings-sidebar"
  57                    state="collapsed"
  58                    fixed
  59                    [right]="sidebar.id !== 'right'">
  60         <ngx-theme-settings></ngx-theme-settings>
  61       </nb-sidebar>
  62     </nb-layout>
  63   `,
  64 })
  65 export class SampleLayoutComponent  implements OnDestroy {
  66
  67   subMenu: NbMenuItem[] = [
  68     {
  69       title: 'PAGE LEVEL MENU',
  70       group: true,
  71     },
  72     {
  73       title: 'Buttons',
  74       icon: 'ion ion-android-radio-button-off',
  75       link: '/pages/ui-features/buttons',
  76     },
  77     {
  78       title: 'Grid',
  79       icon: 'ion ion-android-radio-button-off',
  80       link: '/pages/ui-features/grid',
  81     },
  82     {
  83       title: 'Icons',
  84       icon: 'ion ion-android-radio-button-off',
  85       link: '/pages/ui-features/icons',
  86     },
  87     {
  88       title: 'Modals',
  89       icon: 'ion ion-android-radio-button-off',
  90       link: '/pages/ui-features/modals',
  91     },
  92     {
  93       title: 'Typography',
  94       icon: 'ion ion-android-radio-button-off',
  95       link: '/pages/ui-features/typography',
  96     },
  97     {
  98       title: 'Animated Searches',
  99       icon: 'ion ion-android-radio-button-off',
 100       link: '/pages/ui-features/search-fields',
 101     },
 102     {
 103       title: 'Tabs',
 104       icon: 'ion ion-android-radio-button-off',
 105       link: '/pages/ui-features/tabs',
 106     },
 107   ];
 108   layout: any = {};
 109   sidebar: any = {};
 110
 111   protected layoutState$: Subscription;
 112   protected sidebarState$: Subscription;
 113   protected menuClick$: Subscription;
 114
 115   constructor(protected stateService: StateService,
 116               protected menuService: NbMenuService,
 117               protected themeService: NbThemeService,
 118               protected bpService: NbMediaBreakpointsService,
 119               protected sidebarService: NbSidebarService) {
 120     this.layoutState$ = this.stateService.onLayoutState()
 121       .subscribe((layout: string) => this.layout = layout);
 122
 123     this.sidebarState$ = this.stateService.onSidebarState()
 124       .subscribe((sidebar: string) => {
 125         this.sidebar = sidebar;
 126       });
 127
 128     const isBp = this.bpService.getByName('is');
 129     this.menuClick$ = this.menuService.onItemSelect()
 130       .withLatestFrom(this.themeService.onMediaQueryChange())
 131       .delay(20)
 132       .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
 133
 134         if (bpTo.width <= isBp.width) {
 135           this.sidebarService.collapse('menu-sidebar');
 136         }
 137       });
 138   }
 139
 140   ngOnDestroy() {
 141     this.layoutState$.unsubscribe();
 142     this.sidebarState$.unsubscribe();
 143     this.menuClick$.unsubscribe();
 144   }
 145 }