Flyout menu: Render menu bottom-up if it exceeds the viewport height

Icinga · Aug 14, 2024 · cc9572d · cc9572d
1 parent 4ea3beb
commit cc9572d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
@@ -270,6 +270,12 @@
       left: -.6em;
       z-index: -1;
     }
+
+    &.bottom-up:after {
+      top: unset;
+      bottom: 1em;
+    }
+
     > .nav-item {
       display: block;
       padding-left: 0;

diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js
@@ -319,18 +319,22 @@
             $target.siblings().not($target).removeClass('hover');
             $target.addClass('hover');
 
+            var targetHeight = $target.offset().top + $target.outerHeight();
             $flyout.css({
                 bottom: 'auto',
-                top: $target.offset().top + $target.outerHeight()
+                top: targetHeight
             });
 
             var rect = $flyout[0].getBoundingClientRect();
 
-            if (rect.y + rect.height > window.innerHeight) {
+            if (rect.bottom > window.innerHeight) {
+                $flyout.addClass('bottom-up');
                 $flyout.css({
-                    bottom: 0,
+                    bottom: window.innerHeight - targetHeight,
                     top: 'auto'
                 });
+            } else {
+                $flyout.removeClass('bottom-up');
             }
         }, delay);
     };