Как избежать переполнения контента с помощью адаптивного Sider Ant Design

Question

Я ожидаю, что отзывчивый компонент Sider будет расширяться, не вызывая перекомпоновку элементов в компоненте Content, что не относится к моему методу визуализации, как показано ниже.

import 'antd/dist/antd.css';

// ...skipped

render() {
  return (
    <Layout>
      <Sider
        breakpoint="sm"
        collapsedWidth="0"
        onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
        style={{ minHeight: "100vh" }}
      >
        <Menu theme="dark" mode="inline" selectedKeys={['1']}>
          <Menu.Item key="1">
            <Icon type="user" />
            <span className="nav-text">nav 1</span>
          </Menu.Item>
          <Menu.Item key="2">
            <Icon type="video-camera" />
            <span className="nav-text">nav 2</span>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: '10px', padding: "15px" }}>
          <ListOfData />
        </Content>
      </Layout>
    </Layout>
  );
}

Чего я хочу добиться, так это эффекта Sider, применяемого на сайте документации Ant Design при посещении его с помощью порта мобильного просмотра, который визуально сдвигает содержимое страницы вправо.

Я посмотрел на сайт, упомянутый выше, с помощью инструмента проверки реакции, но не могу сказать, какой официальный компонент используется для этого. Тем не менее, я предполагаю, что он смешал компонент Drawer в Ant Design Mobile, потому что там был класс выдвижных ящиков.

Можно ли использовать для этого только компоненты из Ant Design?

рис. 1: Что я хочу

рис. 2: Мой рухнувший Сайдер

рис. 3: Мой расширенный Sider

Answer 1

OK. Мы на год дальше. Когда я играл с CodePen, который связан с https://ant.design/components/layout/ и добавил:

<Sider
  ..
  style={{position: "absolute", height: "100vh"}}
  ..

у меня это просто сработало ..

Answer 2

Вы можете использовать lib rc-box-menu

<Drawer width="240px">
      <Menu
        style={{ width: 240, height: '200%' }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu
          key="sub1"
          title={<span><Icon type="mail" /><span>Navigation One</span></span>}
        >
          <MenuItemGroup key="g1" title="Item 1">
            <Menu.Item key="1">Option 1</Menu.Item>
            <Menu.Item key="2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup key="g2" title="Item 2">
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}
        >
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu
          key="sub4"
          title={<span><Icon type="setting" /><span>Navigation Three</span></span>}
        >
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    </Drawer>
    <div
      style={{
        width: '100%', height: 667, background: '#fff000',
        color: '#fff', textAlign: 'center', lineHeight: '667px',
      }}
    >
      内容区块
    </div>

Я полагаю, что использование antd pro будет таким, каким оно будет из коробки. Со многими другими компонентами для стандартного применения Вы можете просмотреть еще несколько компонентов и здесь для вашего случая взгляните на меню SLIDER.

https://preview.pro.ant.design/#/