help wanted
Description
Hello everyone,
I want to add filtering/dropdown option in sidebar. How can I do that?
I created following dropdown component. dropdown.component.html
<!-- <div class="dropdown" ngbDropdown>
<button type="button" ngbDropdownToggle class="btn"
[ngClass]="{ 'btn-outline-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
{{ type }}
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
</ul>
</div> -->
<ul class="menu-items">
<!-- <li nbMenuItem> -->
<div class="dropdown" ngbDropdown>
<button type="button" ngbDropdownToggle class="btn"
[ngClass]="{ 'btn-outline-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
{{ type }}
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
</ul>
</div>
<!-- </li> -->
<!-- <li nbMenuItem *ngFor="let item of items"
[menuItem]="item"
[class.menu-group]="item.group"
(hoverItem)="onHoverItem($event)"
(toggleSubMenu)="onToggleSubMenu($event)"
(selectItem)="onSelectItem($event)"
(itemClick)="onItemClick($event)"
class="menu-item"></li> -->
</ul>
Following is dropdown.component.ts file
import { inject } from '@angular/core/testing';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ngx-app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss'],
})
export class DropdownComponent implements OnInit {
types = ['week', 'month', 'year'];
type = 'week';
constructor() { }
ngOnInit() {
}
}
Then I imported into sample.layout.ts using import { DropdownComponent } from '../../../shared/dropdown/dropdown.component';. And modified coded of sample.layout.ts as following
import { Component, OnDestroy } from '@angular/core';
import {
NbMediaBreakpoint,
NbMediaBreakpointsService,
NbMenuItem,
NbMenuService,
NbSidebarService,
NbThemeService,
} from '@nebular/theme';
import { StateService } from '../../../@core/data/state.service';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/withLatestFrom';
import 'rxjs/add/operator/delay';
import { DropdownComponent } from '../../../shared/dropdown/dropdown.component';
// 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'">
<ng-content select="nb-menu"></ng-content>
<ngx-app-dropdown></ngx-app-dropdown>
</nb-sidebar>
<nb-layout-column class="main-content">
<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;
protected menuClick$: Subscription;
constructor(protected stateService: StateService,
protected menuService: NbMenuService,
protected themeService: NbThemeService,
protected bpService: NbMediaBreakpointsService,
protected sidebarService: NbSidebarService) {
this.layoutState$ = this.stateService.onLayoutState()
.subscribe((layout: string) => this.layout = layout);
this.sidebarState$ = this.stateService.onSidebarState()
.subscribe((sidebar: string) => {
this.sidebar = sidebar;
});
const isBp = this.bpService.getByName('is');
this.menuClick$ = this.menuService.onItemSelect()
.withLatestFrom(this.themeService.onMediaQueryChange())
.delay(20)
.subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
if (bpTo.width <= isBp.width) {
this.sidebarService.collapse('menu-sidebar');
}
});
}
ngOnDestroy() {
this.layoutState$.unsubscribe();
this.sidebarState$.unsubscribe();
this.menuClick$.unsubscribe();
}
}
It does come up, however, it is not incorporating into sidemenu as I was expecting. Dropdown menu cross other sidemenu options. Can you please help me?
Thank you all for your great work, I love your template.
Is it possible to pass component into list of menu?