From 6f5b3bdd3c194d02eae254752f1e38d6e44475cf Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 29 Aug 2017 18:54:31 -0700
Subject: [PATCH] Use invisible triangle to prevent accidental hovers when
 mousing to a subnav item

---
 ui/src/side_nav/components/NavItems.js |  1 +
 ui/src/style/layout/sidebar.scss       | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/ui/src/side_nav/components/NavItems.js b/ui/src/side_nav/components/NavItems.js
index 0752f29efa..4977b4b35f 100644
--- a/ui/src/side_nav/components/NavItems.js
+++ b/ui/src/side_nav/components/NavItems.js
@@ -86,6 +86,7 @@ const NavBlock = React.createClass({
         {this.renderSquare()}
         <div className="sidebar-menu">
           {children}
+          <div className="sidebar-menu--triangle" />
         </div>
       </div>
     )
diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss
index 941ef0fbf3..5ff2503fa5 100644
--- a/ui/src/style/layout/sidebar.scss
+++ b/ui/src/style/layout/sidebar.scss
@@ -93,6 +93,7 @@ $sidebar-menu--gutter: 18px;
 */
 .sidebar--item:hover {
   cursor: pointer;
+  z-index: 5;
 
   .sidebar--square {background-color: $sidebar--item-bg-hover;}
   .sidebar--icon {color: $sidebar--icon-hover;}
@@ -187,3 +188,13 @@ $sidebar-menu--gutter: 18px;
   font-weight: 400;
   padding: 0px $sidebar-menu--gutter;
 }
+// Invisible triangle for easier mouse movement when navigating to sub items
+.sidebar-menu--item + .sidebar-menu--triangle {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  z-index: -1;
+  top: $sidebar--width;
+  left: 0px;
+  transform: translate(-50%,-50%) rotate(45deg);
+}