[ui5-side-navigation] Add new sample and update documentation

[LidiyaGeorgieva]

Discussed in #12048

^{Originally posted by gozld5153 July 31, 2025}
I noticed that the SideNavigationItem component has the following CSS applied to the :host(:not([hidden]))

min-width: 15rem;
width: 15rem;
max-width: 100%;

This seems to enforce a fixed width of 15rem, but still sets a max-width of 100%.
However, when this component is placed inside a container narrower than 15rem, it causes horizontal overflow — despite having max-width: 100%.

An intentional design decision, meaning SideNavigationItem is meant to be rigidly 15rem wide at all times?
Or is this a mistake or oversight, where responsiveness was expected but not working due to the combination of min-width and width?

In addition:
The suggestion is to create a sample in the documentation:
https://sap.github.io/ui5-webcomponents/nightly/components/fiori/SideNavigation/
with a custom width of the Side Navigation (for example, 20rem).
In the main.css file, we could add a similar description to the one in the openui5 project:
https://openui5nightly.hana.ondemand.com/api/sap.tnt.SideNavigation#controlProperties

[gnseo]

Hi, @LidiyaGeorgieva .

I didn't see the original issue was closed, I'm not sure if you can see my comment, so I'm attaching the link of comment here too.
#12048 (reply in thread)

Regards.

[github-actions]

This issue has been closed. To reopen, just leave a comment!