What problem does this feature solve?

Currently the the Layout.Sider allows specifying both - className and width. Width is used to manually set the style width of the Sider's <Div/> div component in expanded mode.

This works beautifully in most of the cases however if you want to have responsive design and control the width of the expanded state via className and @media CSS selector - you will fail to. This is because because the collapse/expand mechanism always sets width that overrides the set className that would otherwise the CSS @media selector.
The problem in couple of examples. If I set width to:

• 320. It will always set the width to 320 px in expanded mode no matter the width of the screen. For portrait mode and mobile devices it makes sense to take 100% of the width and push the content below.
• null. It will set the width 0 px in expanded mode, which breaks the visualisation.
• undefined. It will set the width to 200 px, which will lead to case #1

What does the proposed API look like?

I would like to have additional property like disableCollapseWidthControl={true} that will not control the width style of the Sider's <Div/> , so could fine tune the siders width in various positions.

Related links

Other people having the same problem here on StackOverflow