IxMenu (MapNavigation) -> toggleMapExpand does not hide sidebar content

[Johanneslueke]

What happened?

Description

While experimenting with map-navigation layout component. I discovered that it is not possible to programmatically toggle the sidebar content.

through debugging i have discovered that the IxMenu.toggleMapExpand is triggered internally if the user clicks on the double chevron. via User Input the sidebar-content does hide or show. but If i try to toggle it via code it fails. At first i believed i have used the wrong method but while debugging i found this comment from you guys:

I have concluded through this that it is really the intent to hide/show or expand/collapse the sidebar-content. But this does not occur. after some further digging i found the following lines:

that let me to believe if i gain access to the eventEmitter and event an event i might be able to collapse the sidebar-content. but again this failed. later on I have found the method MapNavigation.ToggleSidebar but unfortunately it is inaccessible for the consumer if your api.

How to Reproduce

I have reproduced the problem on StackBlitz:

see StackBlitz

System

• @siemens/ix-angular: v1.5
• @angular: v16

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

v1.5.0

Code to produce this issue.

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { IxMenu } from '@siemens/ix-angular';

@Component({
  selector: 'app-root', 
  template: `
  <ix-map-navigation
  hideContextMenu="true"
  application-name="Web RTC"
  navigation-title="Test Web RTC Technology"
  style="position: unset;"
  #sidebar
>
  <ix-menu #menu [enableToggleTheme]="true"> </ix-menu>
  <div slot="sidebar-content" style="min-height: 100vh;">
    <button (click)="toggle()">toggle button</button>
  </div>

  <div>
    <ng-content> </ng-content>
  </div>
</ix-map-navigation>
`
})
export class AppComponent implements AfterViewInit {
  @ViewChild(IxMenu) menu!: IxMenu;

  ngAfterViewInit(): void {
    this.menu.toggleMapExpand(false);
  }

  toggle() {
    this.menu.mapExpandChange.emit(
      new CustomEvent('', {
        detail: false,
      })
    );
  }
}

[Johanneslueke]

the following Workaround i have found but does not work within any angular lifecycle hooks :

    const el: HTMLElement | null = document.querySelector('#menu-collapse');
    el?.click();

[goncalosard]

Fix is comming on a next release.