Create a SideNavigation component

[vladitasev]

No description provided.

[vladitasev]

Example: https://sapui5.hana.ondemand.com/#/entity/sap.tnt.SideNavigation/sample/sap.tnt.sample.SideNavigation

[MarcusNotheis]

Hey @vladitasev,
any chance to consider this issue as well in your implementation?

[fifoosid]

Hello @MarcusNotheis

Currently the desired behaviour can be implemented inside the application using ui5-side-navigation. Every ui-side-navigation-item has expandable and expanded properties. When a selection-change occurs in the ui5-side-navigation, in the event detail you can find the pressed item as well as a second parameter isArrowClicked. When it is true, it means that the user has pressed the arrow and the expanded attribute will be set to true. On the other hand, if it is false, the application can toggle the item instead of doing a navigation which is the desired behaviour.

I just tested it out and it works as expected:

$0.addEventListener("ui5-selection-change", event => {
    if (!event.detail.isArrowClicked) {
        event.detail.item.expanded = !event.detail.item.expanded;
    }
});

[MarcusNotheis]

Thanks @fifoosid, that's exactly what we have been looking for :)

[fifoosid]

Hello @MarcusNotheis

A quick update from our side: We changed the internal implementation of the ui5-side-navigation. Now selection-change event is not thrown when the arrow is clicked. This way it would be even easier to achieve the desired behaviour. All you have to do is check if the item is expandable or not in order to know whether to navigate or toggle it.