Ember.js - Hamburger menu disable click on div

I am a newbee in Ember. I am designing an application that has a hamburger menu. The menu slides in as an overlay from left to right when clicking the icon. My HTML and CSS for menu component is something like this:

&{  
    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>

 

I have a header component that has the hamburger menu icon. The HTML and JS for it is,

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

<div class="header">
    
        <div class='switcher menu' onclick=>
            
            
                
            
        </div>
    
</div>

As of now, the entire screen is clickable and the menu component slides in. I want to disable click on the menu component so that the user closes the menu by clicking outside it and it slides out. Can someone help? Thanks.