CODEWITHSUNDEEP
angulartypescriptnebular
Chetan Birajdar
Chetan Birajdar

Reputation: 471

How to collapse menu item in a sidebar in nebular NBmenu, when clicked outside or another menu item

I am using nebular menu , in my sample project . I have a scenario as following. I have suppose 4 menu items in the sidebar , and each menu item has say 4 to 5 sub menus.

eg. 

menu 1 
    submenu 1
    submenu 2
menu 2
    submenu 1 
    submenu 2
    submenu 3
menu 3
menu 4

and so on.

Now when i click on menu 1, I can see 2 menus , and now I click on submenu 2 , it derirects me to that particular page. Now if i click on menu 2, I can see 3 submenus and if i click on submenu 3 it redirects me to that particular page,

now the problem is, both the menus are open in sidebar and i can see all the submenus. I want to close the previous menu in sidebar, if other menu is open . Is this possible in nebular menu ? Any help is appreciated.

Please check below link for reference, (can also try to click on the sidebar menus which is the same scenario as mine. )

https://akveo.github.io/nebular/docs/components/menu/api#nbmenucomponent

Here is my sidebar menu code for reference. 

import { Component, OnDestroy } from '@angular/core';
import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
import {
  NbMediaBreakpoint,
  NbMediaBreakpointsService,
  NbMenuItem,
  NbMenuService,
  NbSidebarService,
  NbThemeService,
} from '@nebular/theme';

import { StateService } from '../../../@core/data/state.service';

// TODO: move layouts into the framework
@Component({
  selector: 'app-sample-layout',
  styleUrls: ['./sample.layout.scss'],
  template: `
    <nb-layout [center]="layout.id === 'center-column'" windowMode>
      <nb-layout-header fixed>
    <app-header [position]="sidebar.id === 'start' ? 'normal':                  
 'inverse'"></app-header>
  </nb-layout-header>
  <nb-sidebar class="menu-sidebar"
  tag="menu-sidebar"
  responsive
  [end]="sidebar.id === 'end'">
      <nb-sidebar-header *ngIf="currentTheme == 'default'">
      <a href="#" class="btn btn-hero-success main-btn">
      <img class="sidebar-logo" src="assets/images/icon.png" alt="menu" /> <span class="sidebar-title">MENU </span>
      </a>
      </nb-sidebar-header>
      <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>
  <nb-layout-column class="main-content">
    <ng-content select="router-outlet"></ng-content>
  </nb-layout-column>

  <nb-layout-footer fixed>
    <app-footer></app-footer>
  </nb-layout-footer>
</nb-layout>
       `,
     })
     export class SampleLayoutComponent implements OnDestroy {

       subMenu: NbMenuItem[] = [
         {
           title: 'PAGE LEVEL MENU',
           group: true,
         },
       ];
       layout: any = {};
       sidebar: any = {};

       private alive = true;

       currentTheme: string;

       constructor(protected stateService: StateService,
protected menuService: NbMenuService,
protected themeService: NbThemeService,
protected bpService: NbMediaBreakpointsService,
protected sidebarService: NbSidebarService) {
this.stateService.onLayoutState()
  .pipe(takeWhile(() => this.alive))
  .subscribe((layout: string) => this.layout = layout);

this.stateService.onSidebarState()
  .pipe(takeWhile(() => this.alive))
  .subscribe((sidebar: string) => {
    this.sidebar = sidebar;
  });

const isBp = this.bpService.getByName('is');
this.menuService.onItemSelect()
  .pipe(
    takeWhile(() => this.alive),
    withLatestFrom(this.themeService.onMediaQueryChange()),
    delay(20),
  )
  .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {

    if (bpTo.width <= isBp.width) {
      this.sidebarService.collapse('menu-sidebar');
    }
  });

this.themeService.getJsTheme()
  .pipe(takeWhile(() => this.alive))
  .subscribe(theme => {
    this.currentTheme = theme.name;
  });
  }

           ngOnDestroy() {
             this.alive = false;
            }
          }

Upvotes: 3

Views: 9490

Answers (3)

Jacek Pietal
Jacek Pietal

Reputation: 2019

This line is wrong if (bpTo.width <= isBp.width) {

you have only declared bpFrom and bpTo

try something along the lines of

    this.menuService.onItemSelect()
      .pipe(takeWhile(() => this.alive))
      .subscribe(() => this.sidebarService.compact('menu-sidebar'));

also what you're propably trying to do is not collapse but compact

Upvotes: 1

yggg
yggg

Reputation: 116

You can set autoCollapse on nb-menu component to collapse other menu items. Like this:

  ...
  <nb-menu autoCollapse="true"></nb-menu>
  ...
</app-sample-layout>

Upvotes: 5

Harshit Kankerwal
Harshit Kankerwal

Reputation: 9

make a json file and put data in that according to the docs of nebular and use and pass that data to it. no need to do extra work.

Upvotes: 0

Related Questions