反应汉堡菜单，关闭时在屏幕外显示菜单，打开时在屏幕中间

如何解决反应汉堡菜单，关闭时在屏幕外显示菜单，打开时在屏幕中间

我已经在我的reactjs项目中实现了react-burger-menu。我想不立即在左侧显示我的反应菜单，而是在另一个列式组件旁边显示。

<Container>
        <LeftContainer style={{background: '#00ff00',width: '400px'}}>
        </LeftContainer>
                  
     <div >
       <Menu disableAutoFocus   customBurgerIcon={ false } isOpen={this.state.YouIsOpen}>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contact" className="menu-item" href="/contact">Contact</a>
        <a onClick={ this.showSettings } className="menu-item--small" href="">Settings</a>
      </Menu>
     </div>

</Container>

Container元素在列中，以并排显示内部两个元素。我希望Menu和LeftContainer并排出现，其中Menu在LeftContainer的右侧。当菜单未打开时，我不想看到菜单，而应该看到完整的绿色LeftContainer，但是当菜单打开时，我想看到红色菜单出现在完整的绿色“左容器”的右侧。但是，现在，“关闭”菜单时仍显示菜单，并覆盖了绿色LeftContainer的一部分。它在打开时可以正确显示，我在设置为“关闭”时在屏幕外显示时遇到问题

When menu is open

When menu is closed