From 600ab5ad51a6b253900367092f3d4ae8f919e878 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Wed, 26 Aug 2015 13:44:48 +1000
Subject: [PATCH] improve hamburger rendering fix test cases

---
 .../components/hamburger-menu.js.es6          |   9 +-
 .../templates/components/hamburger-menu.hbs   | 127 +++++++++---------
 .../stylesheets/common/base/hamburger.scss    |  19 ++-
 3 files changed, 89 insertions(+), 66 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6 b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
index 9dc957ed8c0..32e7d194a3f 100644
--- a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
+++ b/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');
diff --git a/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs b/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
index b85ffb0b92c..7cef85af937 100644
--- a/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
+++ b/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
@@ -2,77 +2,78 @@
   <div class='hamburger-header clearfix'>
     <a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
   </div>
-  <ul class="location-links">
-    {{#if currentUser.staff}}
+  <div class='hamburger-body'>
+    <ul class="location-links">
+      {{#if currentUser.staff}}
+        <li>
+          {{#link-to "admin" class="admin-link"}}
+            {{fa-icon "wrench"}} {{i18n 'admin_title'}}
+          {{/link-to}}
+        </li>
+        <li>
+          {{#link-to "adminFlags" class="flagged-posts-link"}}
+            {{fa-icon "flag"}} {{i18n 'flags_title'}}
+            {{#if currentUser.site_flagged_posts_count}}
+              <span title={{i18n 'notifications.total_flagged'}} class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</span>
+            {{/if}}
+          {{/link-to}}
+        </li>
+      {{/if}}
       <li>
-        {{#link-to "admin" class="admin-link"}}
-          {{fa-icon "wrench"}} {{i18n 'admin_title'}}
+        {{#link-to "discovery.latest" class="latest-topics-link"}}
+          {{i18n 'filters.latest.title.zero'}}
         {{/link-to}}
       </li>
+      {{#if siteSettings.enable_badges}}
+        <li>
+          {{#link-to 'badges' class="badge-link"}}{{i18n 'badges.title'}}{{/link-to}}
+        </li>
+      {{/if}}
+
+      {{#if siteSettings.enable_user_directory}}
+        <li>{{#link-to 'users' class="user-directory-link"}}{{i18n "directory.title"}}{{/link-to}}</li>
+      {{/if}}
+
+      {{#if currentUser.show_queued_posts}}
+        <li>
+          {{#link-to 'queued-posts'}}
+            {{i18n "queue.title"}}
+            {{#if currentUser.post_queue_new_count}}
+              <span class='badge-notification flagged-posts'>{{currentUser.post_queue_new_count}}</span>
+            {{/if}}
+          {{/link-to}}
+        </li>
+      {{/if}}
+
+      {{plugin-outlet "site-map-links"}}
+
+      {{#if showKeyboardShortcuts}}
+        <li><a href {{action "keyboardShortcuts"}} class="keyboard-shortcuts-link">{{i18n 'keyboard_shortcuts_help.title'}}</a></li>
+      {{/if}}
       <li>
-        {{#link-to "adminFlags" class="flagged-posts-link"}}
-          {{fa-icon "flag"}} {{i18n 'flags_title'}}
-          {{#if currentUser.site_flagged_posts_count}}
-            <span title={{i18n 'notifications.total_flagged'}} class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</span>
-          {{/if}}
-        {{/link-to}}
+        <a href={{faqUrl}} class="faq-link">{{i18n 'faq'}}</a>
       </li>
-    {{/if}}
-    <li>
-      {{#link-to "discovery.latest" class="latest-topics-link"}}
-        {{i18n 'filters.latest.title.zero'}}
-      {{/link-to}}
-    </li>
-    {{#if siteSettings.enable_badges}}
       <li>
-        {{#link-to 'badges' class="badge-link"}}{{i18n 'badges.title'}}{{/link-to}}
+        {{#link-to 'about' class="about-link"}}{{i18n 'about.simple_title'}}{{/link-to}}
       </li>
-    {{/if}}
+      {{#if showMobileToggle}}
+        <li><a href class="mobile-toggle-link" {{action "toggleMobileView"}}>{{boundI18n mobileViewLinkTextKey}}</a></li>
+      {{/if}}
 
-    {{#if siteSettings.enable_user_directory}}
-      <li>{{#link-to 'users' class="user-directory-link"}}{{i18n "directory.title"}}{{/link-to}}</li>
-    {{/if}}
-
-    {{#if currentUser.show_queued_posts}}
-      <li>
-        {{#link-to 'queued-posts'}}
-          {{i18n "queue.title"}}
-          {{#if currentUser.post_queue_new_count}}
-            <span class='badge-notification flagged-posts'>{{currentUser.post_queue_new_count}}</span>
-          {{/if}}
-        {{/link-to}}
-      </li>
-    {{/if}}
-
-    {{plugin-outlet "site-map-links"}}
-
-    {{#if showKeyboardShortcuts}}
-      <li><a href {{action "keyboardShortcuts"}} class="keyboard-shortcuts-link">{{i18n 'keyboard_shortcuts_help.title'}}</a></li>
-    {{/if}}
-    <li>
-      <a href={{faqUrl}} class="faq-link">{{i18n 'faq'}}</a>
-    </li>
-    <li>
-      {{#link-to 'about' class="about-link"}}{{i18n 'about.simple_title'}}{{/link-to}}
-    </li>
-    {{#if showMobileToggle}}
-      <li><a href class="mobile-toggle-link" {{action "toggleMobileView"}}>{{boundI18n mobileViewLinkTextKey}}</a></li>
-    {{/if}}
-
-    {{plugin-outlet "site-map-links-last"}}
-  </ul>
-
-  {{#if categories}}
-    <ul class="category-links">
-      <li class="heading" title={{i18n 'filters.categories.help'}}>
-        {{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}}
-      </li>
-
-      {{#each categories as |c|}}
-        {{hamburger-category category=c}}
-      {{/each}}
+      {{plugin-outlet "site-map-links-last"}}
     </ul>
-  {{/if}}
 
-  <br>
+    {{#if categories}}
+      <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>
+
+        {{#each categories as |c|}}
+          {{hamburger-category category=c}}
+        {{/each}}
+      </ul>
+    {{/if}}
+  </div>
+
 {{/if}}
diff --git a/app/assets/stylesheets/common/base/hamburger.scss b/app/assets/stylesheets/common/base/hamburger.scss
index ca61474f796..e3ffe127868 100644
--- a/app/assets/stylesheets/common/base/hamburger.scss
+++ b/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;
   }