From f8e285d32b36d4af9c6a6fb3afe2cd21c5fe98f2 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 20 Nov 2017 19:59:02 -0800
Subject: [PATCH] Add invisible hover triangle for user menu on small screens

---
 ui/src/style/layout/sidebar.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss
index 0b410a3cb..c8ded05b4 100644
--- a/ui/src/style/layout/sidebar.scss
+++ b/ui/src/style/layout/sidebar.scss
@@ -204,15 +204,25 @@ $sidebar-menu--gutter: 18px;
   opacity: 0.6;
 }
 // Invisible triangle for easier mouse movement when navigating to sub items
-.sidebar-menu--item + .sidebar-menu--triangle {
+.sidebar-menu--item + .sidebar-menu--triangle,
+.sidebar-menu--inverse .sidebar-menu--triangle {
   position: absolute;
+  z-index: -1;
+}
+.sidebar-menu--item + .sidebar-menu--triangle {
   width: 40px;
   height: 40px;
-  z-index: -1;
   top: $sidebar--width;
   left: 0px;
   transform: translate(-50%,-50%) rotate(45deg);
 }
+.sidebar-menu--inverse .sidebar-menu--triangle {
+  width: 50px;
+  height: 60px;
+  bottom: 12px;
+  left: 6px;
+  transform: translate(-50%,-50%) rotate(30deg);
+}
 
 .sidebar-menu--section {
   white-space: nowrap;