Fix menu positioning problem (#5092)

* fix menu positioning problem * add changelog Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>
wazuh · Jan 10, 2023 · e071e32 · e071e32
1 parent 69635ac
commit e071e32
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -74,6 +74,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - A solaris command has been fixed [5035](https://github.com/wazuh/wazuh-kibana-app/pull/5035)
 - Fixed commands: Aix, OpenSUSE, Alpine, Suse11, Fedora, HP, Oracle Linux 5, Amazon Linux 2, Centos5. Changed the word 'or higher' in buttons to '+'.Fixed validations for Hp, Solaris and Alpine. [5045](https://github.com/wazuh/wazuh-kibana-app/pull/5045)
 - Fixed error in Github module PDF report. [5069](https://github.com/wazuh/wazuh-kibana-app/pull/5069)
+- Fixed menu content panel is displayed in the wrong place. [5092](https://github.com/wazuh/wazuh-kibana-app/pull/5092)
 
 ### Removed
 

diff --git a/public/components/wz-menu/wz-menu.js b/public/components/wz-menu/wz-menu.js
@@ -945,6 +945,10 @@ export const WzMenu = withWindowSize(class WzMenu extends Component {
 
 
     const container = document.getElementsByClassName('euiBreadcrumbs');
+    const expandedHeader = document.getElementById('globalHeaderBars')
+    const wzExpandedHeader = expandedHeader.children.length === 1 
+      ? 'wz-expanded-header-min'  
+      : 'wz-expanded-header-max'
     return ReactDOM.createPortal(
       <WzReduxProvider>
         {this.state.showMenu && (
@@ -954,8 +958,8 @@ export const WzMenu = withWindowSize(class WzMenu extends Component {
               <EuiPopover
                 panelClassName={
                   this.state.pluginPlatformMenuBlockedOrOpened ?
-                    "wz-menu-popover wz-menu-popover-over" :
-                    "wz-menu-popover wz-menu-popover-under"
+                    `wz-menu-popover wz-menu-popover-over ${wzExpandedHeader}` :
+                    `wz-menu-popover wz-menu-popover-under ${wzExpandedHeader}`
                 }
                 button={mainButton}
                 isOpen={this.state.menuOpened}

diff --git a/public/components/wz-menu/wz-menu.scss b/public/components/wz-menu/wz-menu.scss
@@ -96,6 +96,14 @@ wz-menu {
     border-right: none!important;
 }
 
+.wz-expanded-header-min {
+    top: 53px !important;
+}
+
+.wz-expanded-header-max {
+    top: 105px !important;
+}
+
 .wz-menu-popover-over .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after {
     border-bottom: 12px solid #fafbfd!important;
 }