Better flickering auto-nav fix

refs #5652
- reverts previous fix (#5698) to return translate3d smoothness
- add separate open-autonav toggle element and style it to always stick to the viewport edge to avoid wandering hover hit areas

core/client/app/components/gh-nav-menu.js

@@ -24,6 +24,10 @@ export default Ember.Component.extend({
 
         closeMobileMenu: function () {
             this.sendAction('closeMobileMenu');
+        },
+
+        openAutoNav: function () {
+            this.sendAction('openAutoNav');
         }
     }
 });

core/client/app/styles/layouts/main.css

@@ -343,16 +343,44 @@
     color: var(--blue);
 }
 
+/* Autonav is tricky, because hit areas of translated elements aren't in sync
+   with the visible element we need to add the hover behaviour to a small,
+   non-moving element. The following code positions our hit area and transitions
+   it in-sync with it's container so it always sticks to the left of the viewport
+   then hides off-canvas when required as display:none breaks transitions. */
+
+.gh-autonav-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+    width: 15px;
+    height: 100%;
+    transition: transform 0.20s;
+    transform: translate3d(0,0,0);
+}
+
+.gh-autonav .gh-autonav-toggle {
+    display: block;
+}
+
+.gh-nav.open .gh-autonav-toggle {
+    transition: transform 0.15s;
+    transform: translate3d(-235px,0,0);
+}
+
 @media (min-width: 801px) {
     /* Hide the nav */
     .gh-autonav .gh-nav {
         position: absolute;
         top: 0;
-        left: -220px;
+        left: 0;
         z-index: 1000;
         width: 235px;
         height: 100%;
-        transition: left 0.20s;
+        transition: transform 0.20s;
+        /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
+        transform: translate3d(-220px,0,0);
     }
 
     /* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
@@ -367,8 +395,8 @@
 
     /* Bring it back on hover */
     .gh-autonav .gh-nav.open {
-        left: 0;
-        transition: left 0.15s;
+        transition: transform 0.15s;
+        transform: translate3d(0,0,0);
     }
 
     /* Move main content over for the closed-nav trigger bar */

core/client/app/templates/application.hbs

@@ -5,7 +5,7 @@
 
     <div class="gh-viewport {{if autoNav 'gh-autonav'}} {{if showSettingsMenu 'settings-menu-expanded'}} {{if showMobileMenu 'mobile-menu-expanded'}}">
         {{#unless signedOut}}
-            {{gh-nav-menu open=autoNavOpen onMouseEnter="openAutoNav" toggleMaximise="toggleAutoNav" openModal="openModal" closeMobileMenu="closeMobileMenu"}}
+            {{gh-nav-menu open=autoNavOpen toggleMaximise="toggleAutoNav" openAutoNav="openAutoNav" openModal="openModal" closeMobileMenu="closeMobileMenu"}}
         {{/unless}}
 
         {{#gh-main onMouseEnter="closeAutoNav" data-notification-count=topNotificationCount}}

core/client/app/templates/components/gh-nav-menu.hbs

@@ -60,3 +60,4 @@
         {{/gh-dropdown}}
     </div>{{! .help-menu }}
 </footer>
+<div class="gh-autonav-toggle" {{action "openAutoNav" on="mouseEnter"}}></div>