Ngx-admin: Hide menu when changing route to mobile

Created on 30 Mar 2020 · 2Comments · Source: akveo/ngx-admin

Issue type

[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository

Issue description

How do I automatically hide the menu when changing routes?

The page (https://www.akveo.com/ngx-admin/pages/dashboard) is working, but in my application it is not.

I tried to find the responsible function in the repository but I didn't find

    <nb-layout windowMode>
      <nb-layout-header fixed>
        <ngx-header></ngx-header>
      </nb-layout-header>

      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>

      <nb-layout-column>
        <ng-content select="router-outlet"></ng-content>
      </nb-layout-column>

      <nb-layout-footer fixed>
        <ngx-footer></ngx-footer>
      </nb-layout-footer>
    </nb-layout>

Other information:

Angular, Nebular

    "@angular/router": "^8.2.14",
    "@nebular/auth": "4.4.0",
    "@nebular/eva-icons": "4.4.0",
    "@nebular/security": "4.4.0",
    "@nebular/theme": "4.4.0",

Source

endroca

Most helpful comment

My solution:

in header.component.ts extend the ngOnInit method: if the window's size is less than is then colapse sidebar on menu item click event.

userPictureOnly: boolean = false;
hideMenuOnClick: boolean = false;
// ...
const {xl} = this.breakpointService.getBreakpointsMap();
const {is} = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
  .pipe(
    map(([, currentBreakpoint]) => currentBreakpoint),
    takeUntil(this.destroy$),
  )
  .subscribe(currentBreakpoint => {
    this.userPictureOnly = currentBreakpoint.width < xl;
    this.hideMenuOnClick = currentBreakpoint.width <= is;
  });
// ...
this.menuService.onItemClick().subscribe(() => {
  if (this.hideMenuOnClick) {
    this.sidebarService.collapse('menu-sidebar');
  }
});

nkelemen18 on 31 Mar 2020

👍3 🎉1

All 2 comments

My solution:

in header.component.ts extend the ngOnInit method: if the window's size is less than is then colapse sidebar on menu item click event.

userPictureOnly: boolean = false;
hideMenuOnClick: boolean = false;
// ...
const {xl} = this.breakpointService.getBreakpointsMap();
const {is} = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
  .pipe(
    map(([, currentBreakpoint]) => currentBreakpoint),
    takeUntil(this.destroy$),
  )
  .subscribe(currentBreakpoint => {
    this.userPictureOnly = currentBreakpoint.width < xl;
    this.hideMenuOnClick = currentBreakpoint.width <= is;
  });
// ...
this.menuService.onItemClick().subscribe(() => {
  if (this.hideMenuOnClick) {
    this.sidebarService.collapse('menu-sidebar');
  }
});

nkelemen18 on 31 Mar 2020

👍3 🎉1

Thanks alot