Reshrink Sidebar after selection

[blankstar85]

If the user shrinks the sidebar using nb-menu button toggle in the upper left corner, the sidebar should reshrink after selecting an option.

[nnixaa]

Hey @blankstar85, thanks for your comment. Not sure exactly what you mean though :) Would you mind to elaborate on this?

[gentle9]

I think he means that the sidebar should collapse automatically if the sidebar was collapsed before a menuitem was clicked.
If the sidebar is collapsed and a menuitem is clicked the sidebar stays open.

[nnixaa]

Right, okay. Thanks for the idea, we will consider it on later stages.

[blankstar85]

Hello Nnixaa, yes Gentle9 explained this much better. I'll try better in the future. Thanks! Love the theme by the way!

[nnixaa]

@blankstar85 glad to hear you like it!

[hriverahdez]

Trying out the theme, like it a lot so far. On the topic, I was trying to do what the OP suggested manually but it's not working and I'd like to know why.
I am using NbMenuService's onItemSelect method and subscribing to it. Then when an Item is clicked I am calling NbSidebarService's toggle function and passing in the sidebar's tag. It's not working. Oddly on the ngx-admin demo, the toggle icon on the header has a click handler that executes the same code to toggle the sidebar which I am now using and it works there.
This is the code I'm using. It lies on ngOnInit() of a component that encompases the whole app layout and that include the sidebar on its template

this.menuService.onItemSelect() .subscribe((event: {tag: string, item: any}) => { this.sidebarService.toggle(true, 'menu-sidebar'); });

[wahyuen]

running into the same problem as @blankstar85 , currently if the user toggles the sidebar to be a compacted view, any click on a menu item will result in the sidebar to be expanded back out. Unfortunately it also seems that because this is manipulated internally, there are no events that are emitted out so that as developers we can react to this.

Would it be a possible solution to either emit out this event (so that devs can then choose to react and take action if they wish), or better yet, simply don't set the state of the sidebar to be expanded?

sidebar.component.ts

  onClick(event): void {
    const menu = this.element.nativeElement.querySelector('nb-menu');
    if (menu && menu.contains(event.target)) {
      this.expand();  // << this line here
    }
  }

[ohgasauraus]

This is not just limited to menu click, when you set menu to responsive, it also compact when window becomes smaller and expand when window expanded, that too doesn't emit any event. Unable to handle menu size change event due to that.

[nnixaa]

Hi Guys, could anyone please sum up the proposed changes?

[wahyuen]

Hi @nnixaa

i believe the simplest resolution would be to remove the call to this.expand() inside the above mentioned onClick handler in the above post.

Test:

• collapse side menu
• click on a menu item to navigate to it

Expected Result:

• side menu stays collapsed

[nnixaa]

Right, but then there is no way you can access the children menu items, meaning that if the menu item has children elements and you click on it - nothing will happen, resolving into a quite weird behavior, don't you think so?

[wahyuen]

Potentially yes. Perhaps a compromise could be reached, taking the Akveo/Blue Admin template as an example, the following occurs:

• sidebar is minimized
• upon clicking on an icon that has NO child elements, the user is navigated to the page and the sidebar remains minimized
• upon clickong on an icon that contains child elements, the sidebar is expanded for the user to then select the page they wish to navigate to

Perhaps following a similar mantra will address both issues, and at the very least, provide consistency to users of these templates :)

[JavierFuentes]

Hello @nnixaa ,
I have the same problem with this...

<nb-sidebar right [responsive]="responsiveMode" state="expanded">

My Menu has 1-level only MenuItems.

In mobile, user taps on Hamburguer Menu, the Menu expands automatically and fills 3/4 screen width, but when user taps again on one ItemMenu I expect Menu hides automatically for usability reasons.

Is there any parameter for this feature?

[MpBling]

Hi, when I select a item on menu, the other items expanded doesn't should collapsed?

thanks

[mspivak]

Hi! I don't think this was really solved. The concern lays on collapsing the sidebar when an item is selected, assuming the selection navigates away and the sidebar will cover part of the content.
Here's what I've done:

const { xl } = this.breakpointService.getBreakpointsMap();
this.menuService.onItemSelect()
  .filter(context => context.tag === 'sidebar-menu')
  .pipe(
    switchMap(() => this.themeService.onMediaQueryChange()),
    map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
    filter(shouldCollapse => shouldCollapse)
  )
  .subscribe(() => this.sidebarService.collapse('menu-sidebar'));

This goes on my header.component.ts's ngOnInit(). Beware that "menu-sidebar" is a tag I assigned the navbar's nb-menu so this doesn't conflict with my other nb-menus. If you don't have more menues, you could just ignore the first filter line and remove the parameter for the .collapse() method.

[luansevla]

@nnixaa I have the same problem, BUT I fix with this:

On Router Items (Components)

constructor(private sidebarService: NbSidebarService) { }

  ngOnInit(){
    this.toggle()
  }

  toggle() {
    this.sidebarService.toggle();
  }

on click the component is called and the ngOnInit( ) call the toggle( ) method

[khanujasunny]

Not sure why menu auto close for mobile is working perfectly in their demo: https://www.akveo.com/ngx-admin/pages/iot-dashboard
I thought they deploy their master branch but afraid this isn't working for master.

[khanujasunny]

const { xl } = this.breakpointService.getBreakpointsMap();
this.menuService.onItemSelect()
.filter(context => context.tag === 'sidebar-menu')
.pipe(
switchMap(() => this.themeService.onMediaQueryChange()),
map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
filter(shouldCollapse => shouldCollapse)
)
.subscribe(() => this.sidebarService.collapse('menu-sidebar'));

Thanks @mspivak for sharing your solution, I implemented the same in mine and below are my findings:

1. for me this.menuService.onItemSelect doesn't work but this.menuService.onItemClick is working
2. If we resize the browser then on every 'onMediaQueryChange' a new event is getting attached, say if I have resized my browser at least once - map method is getting called twice(for both MediaQuery), hence sidebar is getting hidden in desktop too.

[RronKurtishi]

Thanks everyone. Based on your solutions I created another solution which accounts for different screen sizes.

• On desktop (>1200px) menu shouldn't toggle
• On tablets and small laptops (576px - 1199px) menu should be compacted
• On phones (<575px) menu should collapse

    this.menuService.onItemClick().subscribe(() => {
      if (window.innerWidth < 1200 && window.innerWidth >= 576) {
        this.sidebarService.compact('menu-sidebar');
      } else if (window.innerWidth < 576) {
        this.sidebarService.collapse('menu-sidebar');
      }
    });