How to add filter/dropdown in sidebard

Hello everyone,

I want to add filtering/dropdown option in sidebar. How can I do that?

I created following dropdown component. dropdown.component.html

```

{{ type }}




• {{ t }}

```

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: `

`,
})
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?