SideNavigation: Not Working Inside NavigationLayout on Mobile Devices

[Alexcastr]

Describe the bug

When using SideNavigation inside NavigationLayout on mobile devices, the side navigation does not appear. The hamburger menu is unresponsive, and clicking it does nothing. This issue occurs specifically when accessing the app on a smartphone, whereas it works as expected on desktop.

Expected behavior: The hamburger menu should open the SideNavigation when clicked on mobile devices.

Isolated Example

No response

Reproduction steps

Steps to reproduce:

1.Use SideNavigation inside NavigationLayout in a UI5 web components application.
2.Open the app on a mobile device.
3.Try to click the hamburger menu.
4.Observe that the SideNavigation does not appear.

Expected Behaviour

The behaviur expected in this case is the display of the sidebar when clicking the hamburguer icon in the left side part

Screenshots or Videos

Mobile device

Desktop device

UI5 Web Components for React Version

2.7.2

UI5 Web Components Version

latest version

Browser

Chrome

Operating System

Mobile device - Android

Additional Context

No response

Relevant log output

Organization

Logali

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @Alexcastr

please add an isolated example preferably by leveraging this StackBlitz template.

Edit: I've created an example based on this PR. Please check if it's working there. If not, please give the following details:

• Is it reproducible without our wrapper or React? https://sap.github.io/ui5-webcomponents/components/fiori/NavigationLayout/
• To reproduce this issue, do you have to use a physical device or is a simulator sufficient?
• OS + version
• Browser + version