TrayMenu adapted without NPanel.

Modules/Bar/Tray.qml

@@ -76,37 +76,34 @@ Rectangle {
 
                        if (mouse.button === Qt.LeftButton) {
                          // Close any open menu first
-                         if (trayMenu && trayMenu.visible) {
+                         trayPanel.close()
-                           trayMenu.hideMenu()
-                         }
 
                          if (!modelData.onlyMenu) {
                            modelData.activate()
                          }
                        } else if (mouse.button === Qt.MiddleButton) {
                          // Close any open menu first
-                         if (trayMenu && trayMenu.visible) {
+                         trayPanel.close()
-                           trayMenu.hideMenu()
-                         }
 
                          modelData.secondaryActivate && modelData.secondaryActivate()
                        } else if (mouse.button === Qt.RightButton) {
                          trayTooltip.hide()
-                         // If menu is already visible, close it
+
-                         if (trayMenu && trayMenu.visible) {
+                         // Close the menu if it was visible
-                           trayMenu.hideMenu()
+                         if (trayPanel && trayPanel.visible) {
+                           trayPanel.close()
                            return
                          }
 
                          if (modelData.hasMenu && modelData.menu && trayMenu) {
+                           trayPanel.open()
+
                            // Anchor the menu to the tray icon item (parent) and position it below the icon
                            const menuX = (width / 2) - (trayMenu.width / 2)
                            const menuY = (Style.barHeight * scaling)
                            trayMenu.menu = modelData.menu
                            trayMenu.showAt(parent, menuX, menuY)
-                           trayPanel.show()
                          } else {
-
                            Logger.log("Tray", "No menu available for", modelData.id, "or trayMenu not set")
                          }
                        }
@@ -125,93 +122,33 @@ Rectangle {
     }
   }
 
-  // Attached TrayMenu drop down
+  PanelWindow {
-  // Wrapped in NPanel so we can detect click outside of the menu to close the TrayMenu
-  NPanel {
     id: trayPanel
+    anchors.top: true
+    anchors.left: true
+    anchors.right: true
+    anchors.bottom: true
+    visible: false
+    color: Color.transparent
+    screen: screen
 
-    // Override hide function to animate first
+    function open() {
-    function hide() {
+      visible = true
-      // Start hide animation
-      trayMenuRect.scaleValue = 0.8
-      trayMenuRect.opacityValue = 0.0
-
-      // Hide after animation completes
-      hideTimer.start()
     }
 
-    Connections {
+    function close() {
-      target: trayPanel
+      visible = false
-      ignoreUnknownSignals: true
+      trayMenu.hideMenu()
-      function onDismissed() {
-        // Start hide animation
-        trayMenuRect.scaleValue = 0.8
-        trayMenuRect.opacityValue = 0.0
-
-        // Hide after animation completes
-        hideTimer.start()
-      }
     }
 
-    // Also handle visibility changes from external sources
+    // Clicking outside of the rectangle to close
-    onVisibleChanged: {
+    MouseArea {
-      if (!visible && trayMenuRect.opacityValue > 0) {
-        // Start hide animation
-        trayMenuRect.scaleValue = 0.8
-        trayMenuRect.opacityValue = 0.0
-
-        // Hide after animation completes
-        hideTimer.start()
-      }
-    }
-
-    // Timer to hide panel after animation
-    Timer {
-      id: hideTimer
-      interval: Style.animationSlow
-      repeat: false
-      onTriggered: {
-        trayPanel.visible = false
-        trayMenu.hideMenu()
-      }
-    }
-
-    Rectangle {
-      id: trayMenuRect
-      color: Color.transparent
       anchors.fill: parent
+      onClicked: trayPanel.close()
+    }
 
-      // Animation properties
+    TrayMenu {
-      property real scaleValue: 0.8
+      id: trayMenu
-      property real opacityValue: 0.0
-
-      scale: scaleValue
-      opacity: opacityValue
-
-      // Animate in when component is completed
-      Component.onCompleted: {
-        scaleValue = 1.0
-        opacityValue = 1.0
-      }
-
-      // Animation behaviors
-      Behavior on scale {
-        NumberAnimation {
-          duration: Style.animationSlow
-          easing.type: Easing.OutExpo
-        }
-      }
-
-      Behavior on opacity {
-        NumberAnimation {
-          duration: Style.animationNormal
-          easing.type: Easing.OutQuad
-        }
-      }
-
-      TrayMenu {
-        id: trayMenu
-      }
     }
   }
 }