Clean up clicking outside the hamburger, add test

app/assets/javascripts/discourse/components/hamburger-menu.js.es6

@@ -1,32 +1,23 @@
-import { default as computed, on } from 'ember-addons/ember-computed-decorators';
+import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
+
 
 export default Ember.Component.extend({
   classNameBindings: ['visible::slideright'],
   elementId: 'hamburger-menu',
 
-  visibilityChanged: function(){
-    if(this.get("visible")) {
-     $('html').on('click.close-humburger', (e) => {
-
-        if (this.get('isDestroyed')) {
-          $('html').off('click.close-humburger');
-          return true;
-        }
-
+  @observes('visible')
+  _catchClickOutside() {
+    if (this.get('visible')) {
+      $('html').on('click.close-hamburger', (e) => {
         const $target = $(e.target);
-        if ($target.closest('.dropdown.categories').length > 0) {
-          return;
-        }
-
-        this.set("visible", false);
-        $('html').off('click.close-humburger');
-        return true;
-
+        if ($target.closest('.dropdown.hamburger').length > 0) { return; }
+        if ($target.closest('#hamburger-menu').length > 0) { return; }
+        this.set('visible', false);
       });
     } else {
-      $('html').off('click.close-humburger');
+      $('html').off('click.close-hamburger');
     }
-  }.observes("visible"),
+  },
 
   @computed()
   showKeyboardShortcuts() {
@@ -59,13 +50,14 @@ export default Ember.Component.extend({
         this.set('visible', false);
       }
     });
+
   },
 
   @on('willDestroyElement')
   _removeEvents() {
     this.$().off('click.discourse-hamburger');
     $('body').off('keydown.discourse-hambuger');
-    $('body').off('click.close-humburger');
+    $('html').off('click.close-hamburger');
   },
 
   @computed()

app/assets/javascripts/discourse/templates/header.hbs

@@ -42,7 +42,7 @@
             </a>
           {{/if}}
         </li>
-        <li class='categories dropdown'>
+        <li class='hamburger categories dropdown'>
           {{#if loginRequired}}
             <a class='icon'
                href

test/javascripts/acceptance/hamburger-menu-test.js.es6

@@ -17,6 +17,17 @@ test("Toggle Menu", (assert) => {
   andThen(() => {
     assert.ok(exists("#hamburger-menu.slideright"), "clicking the X hides it");
   });
+
+  click("#toggle-hamburger-menu");
+  andThen(() => {
+    assert.ok(!exists("#hamburger-menu.slideright"), "it opens again");
+  });
+
+  click('#main-outlet')
+  andThen(() => {
+    assert.ok(exists("#hamburger-menu.slideright"), "clicking the body hides the menu");
+  });
+
 });
 
 test("Menu Items", (assert) => {