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

<!-- <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?