Делаем Sider antd отзывчивым

Я пытаюсь реализовать отзывчивое приложение с помощью antd. Одна из вещей, которые у меня есть, — это меню Sider в качестве основной навигации. Одна из вещей, которые я хотел бы сделать, это то, что на маленьких экранах этот сайдер должен быть свернут (предпочтительно как значок гамбургера). Я понятия не имею, как даже начать это. Мой компонент с боковой панелью выглядит примерно так:

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>
    );
  }
}

Я, вероятно, должен также указать, что из Макет документов сказано следующее:

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.

Однако я не мог заставить это работать. Возможно, я неправильно это понимаю.

К сожалению, я не могу встроить свой пример приложения в редактор здесь, поэтому я вот мой рабочий пример приложения. Все, что я хотел бы сделать, это свернуть мою панель навигации Sider в значок гамбургера или даже значок в виде стрелки на маленьких экранах. Куда мне идти отсюда?