From 3998f729dab41d40f9afad68640e6c0fcf2d43c6 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 26 Aug 2015 14:50:15 -0400
Subject: [PATCH] UX: Make hamburger shadow more subtle, don't use active when
 in full

---
 .../discourse/components/hamburger-menu.js.es6           | 9 ++++++++-
 app/assets/stylesheets/common/base/hamburger.scss        | 6 ++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6 b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
index e7066dbc8b9..183df9350db 100644
--- a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
+++ b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
@@ -21,6 +21,9 @@ export default Ember.Component.extend({
       const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - myWidth);
 
       return `left: ${posLeft}px; top: ${posTop}px`.htmlSafe();
+    } else {
+      const headerHeight = parseInt($('header.d-header').height() + 3);
+      return `top: ${headerHeight}px`.htmlSafe();
     }
   },
 
@@ -34,8 +37,12 @@ export default Ember.Component.extend({
 
   @observes('visible')
   _visibleChanged() {
+    const isDropdown = (this.get('viewMode') === 'drop-down');
     if (this.get('visible')) {
-      $('.hamburger-dropdown').addClass('active');
+
+      if (isDropdown) {
+        $('.hamburger-dropdown').addClass('active');
+      }
 
       if ($(window).width() < 1024) {
         this.set('viewMode', 'slide-in');
diff --git a/app/assets/stylesheets/common/base/hamburger.scss b/app/assets/stylesheets/common/base/hamburger.scss
index c42b094c7ad..ce25b4ec815 100644
--- a/app/assets/stylesheets/common/base/hamburger.scss
+++ b/app/assets/stylesheets/common/base/hamburger.scss
@@ -3,8 +3,6 @@
   right: 0;
   top: 0;
   height: 100%;
-  box-shadow: 0 4px 4px 4px rgba(0,0,0, .25);
-
   .hamburger-body {
     position: absolute;
     top: 40px;
@@ -13,12 +11,12 @@
 }
 
 #hamburger-menu.drop-down {
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-  box-shadow: 0 2px 2px rgba(0,0,0, .25);
   position: absolute;
 }
 
 #hamburger-menu {
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  box-shadow: 0 2px 2px rgba(0,0,0, .25);
   background-color: $secondary;
   z-index: 1100;
   overflow: none;