improve hamburger rendering

fix test cases

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

@@ -7,14 +7,21 @@ export default Ember.Component.extend({
   visibilityChanged: function(){
     if(this.get("visible")) {
       $('html').on('click.close-humburger', (e) => {
+
+        if (this.get('isDestroyed')) {
+          $('html').off('click.close-humburger');
+          return true;
+        }
+
         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');

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

@@ -2,6 +2,7 @@
   <div class='hamburger-header clearfix'>
     <a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
   </div>
+  <div class='hamburger-body'>
     <ul class="location-links">
       {{#if currentUser.staff}}
         <li>
@@ -63,7 +64,7 @@
     </ul>
 
     {{#if categories}}
-    <ul class="category-links">
+      <ul class="category-links clearfix">
         <li class="heading" title={{i18n 'filters.categories.help'}}>
           {{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}}
         </li>
@@ -73,6 +74,6 @@
         {{/each}}
       </ul>
     {{/if}}
+  </div>
 
-  <br>
 {{/if}}

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

@@ -5,7 +5,7 @@
   background-color: $secondary;
   z-index: 1002;
   height: 100%;
-  overflow: auto;
+  overflow: none;
   transition: 0.3s ease-in-out;
   @include transform(translateX(0));
 
@@ -17,8 +17,23 @@
     float: right;
     color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
     font-size: 1.5em;
-    margin-right: 0.5em;
+    margin-right: -10px;
     margin-top: 0.1em;
+    padding: 0 4 4 4px;
+    z-index: 9999;
+  }
+
+  .hamburger-header {
+    position: absolute;
+    right: 20px;
+  }
+
+  .hamburger-body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    top: 40px;
+    bottom: 100px;
   }