transform the position

correctly position the arrow
fix scss lint

2 files changed, 38 insertions, 21 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 9364d19def1..95c0082e8dd 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -348,6 +348,9 @@ $(function () {
 
   $(document).trigger('init.scrolling-tabs');
 
+  const style = document.createElement("style");
+  document.head.appendChild(style);
+
   $('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => {
     const windowHeight = window.innerHeight;
     const $this = e.currentTarget;
@@ -355,13 +358,20 @@ $(function () {
 
     if ($subitems.length) {
       const boundingRect = $this.getBoundingClientRect();
-
       const bottomOverflow = windowHeight - (boundingRect.top + $subitems.outerHeight());
       const top = bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
 
       $subitems.css({
-        top,
+        transform: `translate3d(0, ${top}px, 0)`,
       });
+
+      style.sheet.insertRule(`.sidebar-sub-level-items::before { transform: translate3d(0, ${boundingRect.top - top}px, 0); }`, 0);
     }
-  }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
+  }).on('mouseout', (e) => {
+    $('.sidebar-sub-level-items', e.currentTarget).hide();
+
+    if (style.sheet.rules.length) {
+      style.sheet.deleteRule(0);
+    }
+  });
 });
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 527d47d5353..5326ce627f5 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -98,7 +98,6 @@ $new-sidebar-width: 220px;
   }
 
   li {
-    position: relative;
     white-space: nowrap;
 
     a {
@@ -127,20 +126,6 @@ $new-sidebar-width: 220px;
   padding-bottom: 8px;
 
   > li {
-    &:not(.active) {
-      @media (min-width: $screen-sm-min) {
-        a {
-          padding: 11px 16px 11px 24px;
-
-          &:hover,
-          &:focus {
-            background: transparent;
-            font-weight: 600;
-          }
-        }
-      }
-    }
-
     a {
       padding: 8px 16px 8px 24px;
 
@@ -170,13 +155,14 @@ $new-sidebar-width: 220px;
       .sidebar-sub-level-items {
         @media (min-width: $screen-sm-min) {
           position: fixed;
+          top: 0;
           left: 220px;
           width: 150px;
           margin-left: -1px;
           padding-bottom: 0;
-          background-color: #fff;
-          box-shadow: 2px 1px 3px rgba(0,0,0,.1);
-          border: 1px solid #e5e5e5;
+          background-color: $white-light;
+          box-shadow: 2px 1px 3px $dropdown-shadow-color;
+          border: 1px solid $dropdown-border-color;
           border-left: 0;
 
           &::before {
@@ -189,6 +175,27 @@ $new-sidebar-width: 220px;
             border-style: solid;
             border-width: 21px 12px;
             border-color: transparent transparent transparent $hover-background;
+            pointer-events: none;
+          }
+
+          &::after {
+            content: "";
+            position: absolute;
+            top: 44px;
+            left: -20px;
+            right: 0;
+            bottom: 0;
+            z-index: -1;
+          }
+
+          a {
+            padding: 11px 16px 11px 24px;
+
+            &:hover,
+            &:focus {
+              background: transparent;
+              font-weight: 600;
+            }
           }
         }
       }