Hide sidebar fully in ant design

Question

Is there anyway to hide ant design sidebar fully on onCollapse method? One way is to set it's display to none, But I don't want that coz I want the same animation that onCollapse method provides by default.

Answer 1

As mentioned in the "Responsive" example you can set <Layout.Sider collapsedWidth={0} />, which will completely hide it.

By default this causes a trigger button with a hamburger icon to appear, but you can turn it off by adding trigger={null}.

Answer 2

Antd uses breakpoints similar to bootstrap, their idea is Mobile first, which means, you should think in mobile first. It means, you should not design your web app for desktop and then try to hide/adjust when it's in smaller view. Instead, you should, design it for mobile view and then adjust to desktop view.

ultimately, what I want to say is, set the sidebar default state as display:none and then use grid break points such as <Col md={2} />

you can see this question for more details antd hide on smaller view