Expose click & toggle events for Side Navigation

Is your feature request related to a problem? Please describe. Without click events, regular Angular things like <div routerLink="/"></div> do not work and must be worked around. Also, it is impossible to do something when a <ui5-side-navigation-item> item is collapsed/expanded as no events are fired. In my use case, I want to store the expanded property in the browser’s local store, so that it remains the same way after a page refresh. Also, the UX of clicking only the icon of the side bar item is not the greatest.

Describe the solution you’d like

• Expose the click events for <ui5-side-navigation-item> and <ui5-side-navigation-sub-item>.
• Expose the toggle (for collapse/expand) events for <ui5-side-navigation-item> in the case, where <ui5-side-navigation-sub-item> exist.
• Make it possible to cause the collapse/expand by clicking anywhere on the <ui5-side-navigation-item> instead of just the icon. Could be a new property.

Describe alternatives you’ve considered

• Manually cause clicks:

<ui5-side-navigation (selection-change)="$event.detail.item.click()">
    <ui5-side-navigation-item routerLink="/"></ui5-side-navigation-item>
</ui5-side-navigation>

Monkey Patches:

this.sideBar //
    .shadowRoot.querySelector('ui5-tree') //
    .shadowRoot.querySelector('ui5-li-tree[icon="course-book"]') //
    .addEventListener('click', () => this.toggleGroup());

Additional context

[ilhan007]

Hello @hrstoyanov the PR is merged and released in npm under the 0.0.0-e7dd012d7 version. But, you can just use the “next” tag to install it. It includes the requested events and properties in this issue.

One breaking change that you have to be aware and should adopt is related to the icons’ usage:

BREAKING CHANGE

icons: refactor(icons): flatten dist directory(#2425) (c84bc8b) Change the distribution path of all individual icons, which changes all icons’ public imports, by bringing the icons’ modules one level up.

If you previously had: import “@ui5/webcomponents-icons/dist/icons/accept.js”;

Now you should remove the icons folder: import “@ui5/webcomponents-icons/dist/accept.js”;

BR, ilhan

[hrstoyanov]

Thanks, I will give it a test shortly!