improvements to positioning of the dropdown

app/assets/javascripts/fly_out_nav.js

@@ -2,7 +2,8 @@ export const calculateTop = (boundingRect, outerHeight) => {
   const windowHeight = window.innerHeight;
   const bottomOverflow = windowHeight - (boundingRect.top + outerHeight);
 
-  return bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
+  return bottomOverflow < 0 ? (boundingRect.top - outerHeight) + boundingRect.height :
+    boundingRect.top;
 };
 
 export default () => {
@@ -13,10 +14,15 @@ export default () => {
     if ($subitems.length) {
       const boundingRect = $this.getBoundingClientRect();
       const top = calculateTop(boundingRect, $subitems.outerHeight());
+      const isAbove = top < boundingRect.top;
 
       $subitems.css({
         transform: `translate3d(0, ${top}px, 0)`,
       });
+
+      if (isAbove) {
+        $subitems.addClass('is-above');
       }
-  }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
+    }
+  }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide().removeClass('is-above'));
 };

app/assets/stylesheets/new_sidebar.scss

@@ -215,9 +215,18 @@ $new-sidebar-width: 220px;
             position: absolute;
             top: 44px;
             left: -30px;
-            right: 0;
             bottom: 0;
+            height: 100%;
+            max-height: 150px;
+            width: 300px;
             z-index: -1;
+            transform: skew(33deg);
+          }
+
+          &.is-above::after {
+            top: auto;
+            bottom: 44px;
+            transform: skew(-30deg);
           }
 
           a {

spec/javascripts/fly_out_nav_spec.js

@@ -5,6 +5,7 @@ describe('Fly out sidebar navigation', () => {
     it('returns boundingRect top', () => {
       const boundingRect = {
         top: 100,
+        height: 100,
       };
 
       expect(
@@ -14,12 +15,13 @@ describe('Fly out sidebar navigation', () => {
 
     it('returns boundingRect - bottomOverflow', () => {
       const boundingRect = {
-        top: window.innerHeight,
+        top: window.innerHeight - 50,
+        height: 100,
       };
 
       expect(
         calculateTop(boundingRect, 100),
-      ).toBe(window.innerHeight - 100);
+      ).toBe(window.innerHeight - 50);
     });
   });
 });