CODEWITHSUNDEEP
javascriptcssreactjsantd
theJuls
theJuls

Reputation: 7460

Making antd's Sider responsive

I am attempting to implement a responsive app with antd. One of the things I have is a Sider menu as my main navigation. One of the things I would like to do is that on small screens this sider be collapsed (as the hamburguer icon preferrably). I have no idea how to even start this. My component with the sidebar looks something like this:

class App extends React.Component {

  render() {
    return (
      <Layout>
        <Sider width={200} collapsedWidth={500}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
          >
              <Menu.Item key="1">option1</Menu.Item>
              <Menu.Item key="2">option2</Menu.Item>
              <Menu.Item key="3">option3</Menu.Item>
              <Menu.Item key="4">option4</Menu.Item>
          </Menu>
        </Sider>
        </Layout>
    );
  }
}

I should probably also point out that from the Layout docs, the following is said:

Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if the collapsedWidth is set to 0.

However I could not get this to work. Perhaps I misunderstand it.

Unfortunately I am not able to embed my sample app in the editor here, so I here is my working sample app. All I would like to do is collapse my Sider navbar into a hamburguer icon or even an arrow like icon on small screens. Where do I go from here?

Upvotes: 2

Views: 8619

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

You have a collapsible sider official example.

From here you can choose whatever width \ icons you need based on state.

Also, you have a good example of antd components, especially a sidebar with the hamburger icon.

Upvotes: 2

Related Questions