我应该使用什么来处理幻灯片菜单和汉堡菜单按钮

Question

我是新来的人，我有一个带有汉堡菜单的标头，用于打开/关闭幻灯片菜单，还有ClickAwayListener作为移动尺寸，用于打开和关闭该幻灯片菜单。我的问题是：

• 默认情况下，“移动尺寸”处于打开状态，当我单击汉堡菜单时，它已关闭并再次打开（由于ClickAwayListener），我无法解决此问题

• 在我的项目中，所有更改都发生在父组件中

   <ClickAwayListener onClickAway=  {(this.props.DrawerOpen) ? () => (window.innerWidth <= 813) ? 
      this.props.drawerHandleClick(): false : false} 
   >
      <Slide
          direction= 'left' 
          in= {this.props.DrawerOpen}
      >
       ----------------Some Code--------------------------
      </Slide>
  </ClickAwayListener>
  

这是我的标头代码

<div className="header-bg">
    <IconButton
         onClick={() => this.props.drawerHandleClick()}
         style={{outline:'none', color: 'white', float:'right', marginRight:'20px'}}
    >
       <MenuIcon/>
    </IconButton>
</div>