FIX: collapse mobile nav on outside click

app/assets/javascripts/discourse/components/mobile-nav.js.es6

@@ -35,21 +35,24 @@ export default Ember.Component.extend({
     this._updateSelectedHtml();
   },
 
-  @on('didInsertElement')
-  _bindClick() {
-    this.$().on("click.mobile-nav", 'ul li', () => {
-      this.set('expanded', false);
-    });
-  },
-
-  @on('willDestroyElement')
-  _unbindClick() {
-    this.$().off("click.mobile-nav", 'ul li');
-  },
-
   actions: {
     toggleExpanded(){
       this.toggleProperty('expanded');
+
+      Em.run.next(()=>{
+        if (this.get('expanded')) {
+          $(window)
+            .off("click.mobile-nav")
+            .on("click.mobile-nav", (e) => {
+              let expander = this.$('.expander');
+              expander = expander && expander[0];
+              if ($(e.target)[0] !== expander) {
+                this.set('expanded', false);
+                $(window).off("click.mobile-nav");
+              }
+          });
+        }
+      });
     }
   }
 });

app/assets/javascripts/discourse/templates/mobile/components/mobile-nav.hbs

@@ -1,5 +1,5 @@
 {{#if selectedHtml}}
-  <li><a {{action 'toggleExpanded'}}>{{{selectedHtml}}} <i class='fa fa-caret-down'></i></a></li>
+  <li><a class='expander' {{action 'toggleExpanded'}}>{{{selectedHtml}}} <i class='fa fa-caret-down'></i></a></li>
 {{/if}}
 <ul class='drop {{if expanded 'expanded'}}'>
 {{yield}}