improvements to positioning of the dropdown

1 files changed, 8 insertions, 2 deletions

diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 1ae2e72410f..f2151396d43 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/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'));
 };