mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
import { Component, OnDestroy } from '@angular/core';
|
|
import { NbMenuItem } from '@nebular/theme';
|
|
import { Subscription } from 'rxjs/Subscription';
|
|
|
|
import { StateService } from '../../../@core/data/state.service';
|
|
|
|
// TODO: move layouts into the framework
|
|
@Component({
|
|
selector: 'ngx-sample-layout',
|
|
styleUrls: ['./sample.layout.scss'],
|
|
template: `
|
|
<nb-layout [center]="layout.id === 'center-column'" windowMode>
|
|
<nb-layout-header fixed>
|
|
<ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
|
|
</nb-layout-header>
|
|
|
|
<nb-sidebar class="menu-sidebar"
|
|
tag="menu-sidebar"
|
|
responsive
|
|
[right]="sidebar.id === 'right'">
|
|
<nb-sidebar-header>
|
|
<button class="btn btn-hero-success main-btn">
|
|
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
|
</button>
|
|
</nb-sidebar-header>
|
|
<ng-content select="nb-menu"></ng-content>
|
|
</nb-sidebar>
|
|
|
|
<nb-layout-column>
|
|
<ng-content select="router-outlet"></ng-content>
|
|
</nb-layout-column>
|
|
|
|
<nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
|
<nb-menu [items]="subMenu"></nb-menu>
|
|
</nb-layout-column>
|
|
|
|
<nb-layout-column right class="small" *ngIf="layout.id === 'three-column'">
|
|
<nb-menu [items]="subMenu"></nb-menu>
|
|
</nb-layout-column>
|
|
|
|
<nb-layout-footer fixed>
|
|
<ngx-footer></ngx-footer>
|
|
</nb-layout-footer>
|
|
|
|
<nb-sidebar class="settings-sidebar"
|
|
tag="settings-sidebar"
|
|
state="collapsed"
|
|
fixed
|
|
[right]="sidebar.id !== 'right'">
|
|
<ngx-theme-settings></ngx-theme-settings>
|
|
</nb-sidebar>
|
|
</nb-layout>
|
|
`,
|
|
})
|
|
export class SampleLayoutComponent implements OnDestroy {
|
|
|
|
subMenu: NbMenuItem[] = [
|
|
{
|
|
title: 'PAGE LEVEL MENU',
|
|
group: true,
|
|
},
|
|
{
|
|
title: 'Buttons',
|
|
icon: 'ion ion-android-radio-button-off',
|
|
link: '/pages/ui-features/buttons',
|
|
},
|
|
{
|
|
title: 'Grid',
|
|
icon: 'ion ion-android-radio-button-off',
|
|
link: '/pages/ui-features/grid',
|
|
},
|
|
{
|
|
title: 'Icons',
|
|
icon: 'ion ion-android-radio-button-off',
|
|
link: '/pages/ui-features/icons',
|
|
},
|
|
{
|
|
title: 'Modals',
|
|
icon: 'ion ion-android-radio-button-off',
|
|
link: '/pages/ui-features/modals',
|
|
},
|
|
{
|
|
title: 'Typography',
|
|
icon: 'ion ion-android-radio-button-off',
|
|
link: '/pages/ui-features/typography',
|
|
},
|
|
{
|
|
title: 'Animated Searches',
|
|
icon: 'ion ion-android-radio-button-off',
|
|
link: '/pages/ui-features/search-fields',
|
|
},
|
|
{
|
|
title: 'Tabs',
|
|
icon: 'ion ion-android-radio-button-off',
|
|
link: '/pages/ui-features/tabs',
|
|
},
|
|
];
|
|
layout: any = {};
|
|
sidebar: any = {};
|
|
|
|
protected layoutState$: Subscription;
|
|
protected sidebarState$: Subscription;
|
|
|
|
constructor(protected stateService: StateService) {
|
|
this.layoutState$ = this.stateService.onLayoutState()
|
|
.subscribe((layout: string) => this.layout = layout);
|
|
|
|
this.sidebarState$ = this.stateService.onSidebarState()
|
|
.subscribe((sidebar: string) => {
|
|
this.sidebar = sidebar
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.layoutState$.unsubscribe();
|
|
this.sidebarState$.unsubscribe();
|
|
}
|
|
}
|