Fixed collapsible sider menu

[mkermani144]

What problem does this feature solve?

Although an example of a fixed Sider is provided in the documentation (#5660), the trick of making Sider position fixed does not work easily if the Sider has collapsible menu. The developer should manage left (or right) property of the content by hand, and change it on collapse. Is there any better approach to do it, or is it intended to add a feature facilitating this?

What does the proposed API look like?

For example, Sider parent (which is a Layout) could have a collapsibleFixedSider, by setting which the Sider position becomes fixed, and its sibling (probably a Layout or Layout.Content) margin property updates is handled inside of the library itself, adding a layer of abstraction to the developer.

[marswong]

@mkermani144
you want to implement a Sider just like YouTube?

[mkermani144]

@marswong
Yes, something like it.

[marswong]

@mkermani144

The developer should manage left (or right) property of the content by hand, and change it on collapse.

the style of SubMenu is ok. could u add an online demo? it's so hard to understand what u describe.

[wzard]

@marswong I am facing the same issue. I have uploaded a video here. https://youtu.be/nZ8Tuswd7JI .

When you make a fixed sidebar collapsible, the responsive-ness of the Content disappears.
I did a workaround by adding the margin of the content getting changed everytime the menu is collapsed or uncollapsed.

As you can see in the video, the interface looks lagging and not smooth, at all.

@mkermani144 How did you worked around this one?

[mkermani144]

@wzard As I said, I manage margin property of main content manually (by changing state), but in my case, it's smooth and does not lag.

[wzard]

@mkermani144 When I am making the position: "fixed" for the Sider, the Inline Icons on collapse also doesn't work. Can you share a codepen demo of how you are making it work, please?

[mkermani144]

@Xemnoras As I said earlier, I manage margin style of the main content manually using state.

[abilash13]

So are there any plans to fix this behavior?

[vitorsilvalima]

I think having the side menu to be able to have a fixed position and at the same time being able to collapse would be great and I really look forward for this feature. It may not be implemented but it would be great to have examples in the doc to show to do that.

[t0wer001]

I'm hoping for nice solution to this, I would love to manage as little state as possible in my application.

[edpark11]

I did the same thing, fixed it by creating a setMarginLeftHandler in the parent Layout and passing that as a prop to a wrapped Sider. Then onCollapse (on the Sider), call props.setMarginLeftHandler to fix up the margins of the parent. In my case I used a HOC recompose component so I could still use functional React components but if would of course work with standard stateful react components too. Regardless, definitely a tad awkward.

[afc163]

You can see Ant Design Pro width fixed sider: https://preview.pro.ant.design/dashboard/analysis?fixSiderbar=1

[Uhel]

I did it simply by adding some css rules! 👍
Demo's here: https://codesandbox.io/s/antd-sider-fixed-solved-hgz5l

[hmassad]

I did it simply by adding some css rules! 👍
Demo's here: https://codesandbox.io/s/antd-sider-fixed-solved-hgz5l

by changing Sider style to
style={{ overflow: 'auto', height: '100vh', position: 'sticky', top: 0, left: 0, }}

[simonsankar]

I did it simply by adding some css rules! 👍
Demo's here: https://codesandbox.io/s/antd-sider-fixed-solved-hgz5l

You legend

[AltRoot17]

I did it simply by adding some css rules! 👍
Demo's here: https://codesandbox.io/s/antd-sider-fixed-solved-hgz5l

by changing Sider style to
style={{ overflow: 'auto', height: '100vh', position: 'sticky', top: 0, left: 0, }}

Thanks buddy, its worked for me

[zubayerhimel]

I did it simply by adding some css rules! 👍
Demo's here: https://codesandbox.io/s/antd-sider-fixed-solved-hgz5l

by changing Sider style to
style={{ overflow: 'auto', height: '100vh', position: 'sticky', top: 0, left: 0, }}

This works great. But still, there is a problem. After adding custom CSS, sidebar trigger isn't showing up and I can't use the sidebar as there is nothing to trigger the sidebar to open or close

[madrelax]

I did it simply by adding some css rules! 👍
Demo's here: https://codesandbox.io/s/antd-sider-fixed-solved-hgz5l

by changing Sider style to style={{ overflow: 'auto', height: '100vh', position: 'sticky', top: 0, left: 0, }}

Thanks. U r awesome)))

[Blooming786]

How could we move the collapsible sidebar to the top left instead of now having it at the left bottom?

[moabbar]

I did it simply by adding some css rules! 👍 Demo's here: https://codesandbox.io/s/antd-sider-fixed-solved-hgz5l

if you hover over the menu items while the sidebar's collapsed, and scroll the page, the tooltip of the hovered menu item will slide as well.
Does anyone know how to fix this issue?