From 99f67657d098c6a17651f25b502b885150c07db4 Mon Sep 17 00:00:00 2001
From: Sukhwinder Dhillon <sukhwinder33445@gmail.com>
Date: Mon, 12 Jun 2023 13:12:28 +0200
Subject: [PATCH] Flyout menu: Render menu `bottom-up` if it exceeds the
 viewport height

---
 public/css/icinga/menu.less             | 6 ++++++
 public/js/icinga/behavior/navigation.js | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 98650a237b3..e9ed78808f3 100644
--- 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
index df0e1e6d8c3..d3b40a8ed85 100644
--- a/public/js/icinga/behavior/navigation.js
+++ b/public/js/icinga/behavior/navigation.js
@@ -296,6 +296,8 @@
         var $target = $(this);
         var $flyout = $target.find('.nav-level-2');
 
+        $flyout.removeClass('down-to-up');
+
         if (! $flyout.length) {
             $layout.removeClass('menu-hovered');
             $target.siblings().not($target).removeClass('hover');
@@ -327,10 +329,13 @@
             var rect = $flyout[0].getBoundingClientRect();
 
             if (rect.y + rect.height > window.innerHeight) {
+                $flyout.addClass('bottom-up');
                 $flyout.css({
-                    bottom: 0,
+                    bottom: window.innerHeight - ($target.offset().top + $target.find('> a')[0].offsetHeight),
                     top: 'auto'
                 });
+            } else {
+                $flyout.removeClass('bottom-up');
             }
         }, delay);
     };