Запретить перемещение компонентов при открытии бокового меню

Я новичок в веб-разработке и немного борюсь с моим компонентом бокового меню из Ant design.

Это сворачиваемое меню, которое перемещает многие другие компоненты, если щелкнуть, чтобы открыть его.

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

Это компонент бокового меню:

    import React from 'react'
    import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';

    const { Header, Content, Footer, Sider } = Layout;
    const SubMenu = Menu.SubMenu;

    export class SideMenu extends React.Component {

      render() {
        return (
            <Menu
              mode="vertical"
              theme="dark"
              className="side-menu"
            >
              ...
            </Menu>
        )
      }
    }

 Thats my layout component:

import React from 'react'
...
import { Layout, Menu, Icon, Row, Col } from 'antd'

const { Header, Footer, Sider, Content } = Layout

export class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { collapsed: true }
  }

  toggle() {
    console.log('click')
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  render() {
    return (
      <Layout className="main-layout">
        <Sider className='sider'
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="app-logo" id="logo">
            <img src="images/logo.png" alt="Augecon_Logo" height="30" width="30"/>
          </div>
          <SideMenu />
        </Sider>
        <Layout>
          <Header className="app-header">
            <Row justify="center" align="middle">
              <Col span={3}>
                <Icon
                  className="app-trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle.bind(this)}
                />
              </Col>
              <Col span={10} push={10}>
                <div className="app-info" >Sexta feira 12/01/2018 - 17:58 | Daniel Oliveira</div> <!--This item moves-->
              </Col>
              <Col span={3} push={8}>
                <UserAvatar/><!--This item moves-->
              </Col>
            </Row>
          </Header>
            <Content className="app-background" >
              <div className="div-background">
                <div>
                  <img src="images/sagic.png" alt="sagic" className="img-title" center center fixed/> <!--This item moves-->
                </div>
                <Row type="flex" gutter={32} justify="space-around" className="row-card"> <!--This item moves-->
                  <Col span={7} push={1}>
                    <CardSuporte/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardSugestoes/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardLoja/>
                  </Col>
                </Row>
              </div>
            </Content>
        </Layout>
      </Layout>
    )
  }
}

Это мой компонент макета:

import React from 'react'
import { SideMenu } from './sidemenu.js'
import { UserAvatar} from './avatar.js'
import { CardSuporte} from './cardsuporte.js'
import { CardSugestoes} from './cardsugestoes.js'
import { CardLoja} from './cardloja.js'
import { Layout, Menu, Icon, Row, Col } from 'antd'

const { Header, Footer, Sider, Content } = Layout

export class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { collapsed: true }
  }

  toggle() {
    console.log('click')
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  render() {
    return (
      <Layout className="main-layout">
        <Sider className='sider'
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="app-logo" id="logo">
            <img src="images/logo.png" alt="Augecon_Logo" height="30" width="30"/>
          </div>
          <SideMenu />
        </Sider>
        <Layout>
          <Header className="app-header">
            <Row justify="center" align="middle">
              <Col span={3}>
                <Icon
                  className="app-trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle.bind(this)}
                />
              </Col>
              <Col span={10} push={10}>
                <div className="app-info" >Sexta feira 12/01/2018 - 17:58 | Daniel Oliveira</div>
              </Col>
              <Col span={3} push={8}>
                <UserAvatar/>
              </Col>
            </Row>
          </Header>
            <Content className="app-background" >
              <div className="div-background">
                <div>
                  <img src="images/sagic.png" alt="sagic" className="img-title" center center fixed/>
                </div>
                <Row type="flex" gutter={32} justify="space-around" className="row-card">
                  <Col span={7} push={1}>
                    <CardSuporte/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardSugestoes/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardLoja/>
                  </Col>
                </Row>
              </div>
            </Content>
        </Layout>
      </Layout>
    )
  }
}

Я уже пробовал некоторые манипуляции с css, такие как {position: fixed, relative, и т. Д.}, Но безрезультатно.