updated styles

app/assets/javascripts/fly_out_nav.js

@@ -5,12 +5,7 @@ export const calculateTop = (boundingRect, outerHeight) => {
   return bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
 };
 
-export const createArrowStyles = (boundingRect, top) => `.sidebar-sub-level-items::before { transform: translate3d(0, ${boundingRect.top - top}px, 0); }`;
-
 export default () => {
-  const style = document.createElement('style');
-  document.head.appendChild(style);
-
   $('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => {
     const $this = e.currentTarget;
     const $subitems = $('.sidebar-sub-level-items', $this).show();
@@ -22,14 +17,6 @@ export default () => {
       $subitems.css({
         transform: `translate3d(0, ${top}px, 0)`,
       });
-
-      style.sheet.insertRule(createArrowStyles(boundingRect, top), 0);
     }
-  }).on('mouseout', (e) => {
-    $('.sidebar-sub-level-items', e.currentTarget).hide();
-
-    if (style.sheet.rules.length) {
-      style.sheet.deleteRule(0);
-    }
-  });
+  }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
 };

app/assets/stylesheets/new_sidebar.scss

@@ -151,6 +151,12 @@ $new-sidebar-width: 220px;
 
 .sidebar-top-level-items {
   > li {
+    > a {
+      @media (min-width: $screen-sm-min) {
+        margin-right: 2px;
+      }
+    }
+
     &:not(.active) {
       .sidebar-sub-level-items {
         @media (min-width: $screen-sm-min) {
@@ -158,43 +164,26 @@ $new-sidebar-width: 220px;
           top: 0;
           left: 220px;
           width: 150px;
-          margin-left: -1px;
-          padding-bottom: 0;
-          background-color: $white-light;
+          background-color: $hover-background;
           box-shadow: 2px 1px 3px $dropdown-shadow-color;
-          border: 1px solid $dropdown-border-color;
-          border-left: 0;
-
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 21px 12px;
-            border-color: transparent transparent transparent $hover-background;
-            pointer-events: none;
-          }
+          border-radius: 0 3px 3px 0;
 
           &::after {
             content: "";
             position: absolute;
             top: 44px;
-            left: -20px;
+            left: -30px;
             right: 0;
             bottom: 0;
             z-index: -1;
           }
 
           a {
-            padding: 11px 16px 11px 24px;
+            color: $white-light;
 
             &:hover,
             &:focus {
-              background: transparent;
-              font-weight: 600;
+              background-color: darken($hover-background, 10%);
             }
           }
         }

spec/javascripts/fly_out_nav_spec.js

-import { calculateTop, createArrowStyles } from '~/fly_out_nav';
+import { calculateTop } from '~/fly_out_nav';
 
 describe('Fly out sidebar navigation', () => {
   describe('calculateTop', () => {
@@ -22,16 +22,4 @@ describe('Fly out sidebar navigation', () => {
       ).toBe(window.innerHeight - 100);
     });
   });
-
-  describe('createArrowStyles', () => {
-    it('returns translate3d styles', () => {
-      const boundingRect = {
-        top: 100,
-      };
-
-      expect(
-        createArrowStyles(boundingRect, 50),
-      ).toContain('translate3d(0, 50px, 0)');
-    });
-  });
 });