Ember.js-汉堡菜单禁用div单击

Question

我是Ember的新手。我正在设计一个具有汉堡菜单的应用程序。单击该图标时，菜单从左到右以叠加方式滑入。我的HTML和CSS菜单组件是这样的：

& {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  background-color: rgba(54, 53, 69, 0.65);
  @include set-z-index(LOADING_OVERLAY);
  @keyframes slideIn {
    from {
      transform: translate3d(-100%, 0, 0);
    }
    to {
      transform: none;
    }
  }
  @keyframes slideOut {
    from {
      transform: none;
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
  }
  .slideIn {
    animation-name: slideIn;
    animation-duration: 0.3s;
    animation-direction: normal;
  }
  .slideOut {
    animation-name: slideOut;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }
  .modaldiv {
    width: 17%;
    height: 100%;
    float: right;
  }
  .menu {
    width: 83%;
    height: 100%;
    /* rest of the menu css goes here */
  }
}

<div class="modaldiv"></div>
<div class="menu slideIn">
  <!--Entire menu component goes here like user details -->
</div>
</div>

我有一个带有汉堡菜单图标的标题组件。 HTML和JS是

export default Component.extend({
      openMenu: null,
      actions: {
        menuOpen() {
          if (!this.get('openMenu')) {
            this.set('openMenu', true);
          } else {
            this.set('openMenu', false);
          }
        }
      });

<div class="header">
  {{#if menuComponent}}
  <div class='switcher menu' onclick={{action 'menuOpen'}}>
    {{fa-icon 'bars'}} {{#if openMenu}} {{component menuComponent}} {{/if}}
  </div>
  {{/if}}
</div>

到目前为止，整个屏幕都是可单击的。我想禁用对菜单组件的单击，以便用户通过在菜单外部单击来关闭菜单，然后将其滑出。

我尝试对菜单和modaldiv组件进行操作

import Component from '@ember/component';

export default Component.extend({
  closeClicked = false,
  actions: {
    closeMenu() {
      this.set(this.closeClicked, true); //slide out does not work!
    }
  },
  disableclick() {
    this.$('.menu').css('pointer-events', 'none'); //does not disable the clicks on menu component. 
  },
});

<div class="modaldiv" onclick={{action 'closeMenu'}}></div>
<div class="menu {{if closeClicked " slideOut " "slideIn "}}" onclick={{action 'disableclick'}}>
  <!--Entire menu component goes here like user details -->
</div>
</div>

我不确定我要去哪里错。有人可以说明我如何解决这个问题吗？谢谢。