UX: improve hamburger in desktop

- dock underneath header
- click anywhere to get it to go away

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

@@ -4,6 +4,23 @@ export default Ember.Component.extend({
   classNameBindings: ['visible::slideright'],
   elementId: 'hamburger-menu',
 
+  visibilityChanged: function(){
+    if(this.get("visible")) {
+      $('html').on('click.close-humburger', (e) => {
+        const $target = $(e.target);
+        if ($target.closest('.dropdown.categories').length > 0) {
+          return;
+        }
+        console.log(e.toElement || e.relatedTarget || e.target);
+        this.set("visible", false);
+        $('html').off('click.close-humburger');
+        return true;
+      });
+    } else {
+      $('html').off('click.close-humburger');
+    }
+  }.observes("visible"),
+
   @computed()
   showKeyboardShortcuts() {
     return !Discourse.Mobile.mobileView && !this.capabilities.touch;
@@ -43,6 +60,7 @@ export default Ember.Component.extend({
     $('body').off('keydown.discourse-hambuger');
     $('body').off('swipeleft.discourse-hamburger');
     $('body').off('swiperight.discourse-hamburger');
+    $('body').off('click.close-humburger');
   },
 
   @computed()

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

@@ -1,4 +1,5 @@
 {{render "header"}}
+{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
 
 <div id="main-outlet" class="wrap">
   <div class="container">
@@ -19,4 +20,3 @@
 {{render "topic-entrance"}}
 {{render "composer"}}
 
-{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}

app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs

@@ -1,5 +1,7 @@
 {{#if visible}}
-  <a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
+  <div class='hamburger-header clearfix'>
+    <a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
+  </div>
   <ul class="location-links">
     {{#if currentUser.staff}}
       <li>

app/assets/stylesheets/common/base/hamburger.scss

@@ -9,7 +9,7 @@
   transition: 0.3s ease-in-out;
   @include transform(translateX(0));
 
-  box-shadow: 4px 0 4px 5px rgba(0,0,0, .25);
+  box-shadow: 0 4px 4px 4px rgba(0,0,0, .25);
   padding: 0.5em 0.5em 0.5em 0.5em;
   width: 300px;
 
@@ -17,10 +17,11 @@
     float: right;
     color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
     font-size: 1.5em;
-    margin-right: 0.1em;
+    margin-right: 0.5em;
     margin-top: 0.1em;
   }
 
+
   ul {
     list-style: none;
     margin: 0;

app/assets/stylesheets/desktop.scss

@@ -17,6 +17,7 @@
 @import "desktop/user";
 @import "desktop/history";
 @import "desktop/queued-posts";
+@import "desktop/hamburger";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 

app/assets/stylesheets/desktop/hamburger.scss

@@ -0,0 +1,8 @@
+.docked #hamburger-menu {
+  position: fixed;
+}
+
+#hamburger-menu {
+  position: absolute;
+  top: 63px
+}