fancy open animation, but still no padding

modules/bar/components/tray/Tray.qml

@@ -16,7 +16,7 @@ Row {
 
             sourceComponent: item
             property Component item: TrayItem {
-              trayItem: modelData
+                trayItem: modelData
             }
         }
     }

modules/bar/components/tray/TrayItem.qml

@@ -38,32 +38,17 @@ Clickable {
         anchors.centerIn: parent
     }
 
-    PopupWindow {
+    Menu {
-        id: popup
+        id: menu
 
-        visible: root.menuOpened
+        opened: root.menuOpened
-
-        color: 'transparent'
 
         anchor.item: root
         anchor.rect.x: root.width / 2 - width / 2
         anchor.rect.y: root.height + 8
 
-        implicitWidth: menu.width
+        menuOpener: QsMenuOpener {
-        implicitHeight: menu.height
+            menu: trayItem.menu
-
-        Rectangle {
-            anchors.fill: parent
-            color: Theme.palette.base300
-            radius: 8
-        }
-
-        Menu {
-            id: menu
-
-            menuOpener: QsMenuOpener {
-                menu: trayItem.menu
-            }
         }
     }
 }

modules/bar/components/tray/menu/Menu.qml

@@ -1,29 +1,145 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import "../../../../../config/"
 import "../../../../../styled/"
 
-ColumnLayout {
+PopupWindow {
-    id: menu
+    id: window
+
     property QsMenuOpener menuOpener
+    property bool opened: false
 
-    anchors.margins: 8
+    color: 'transparent'
 
-    Repeater {
+    implicitWidth: menu.width
-        model: menuOpener.children
+    implicitHeight: menu.height
-        delegate: Loader {
-            required property QsMenuEntry modelData
-            active: true
 
-            sourceComponent: modelData.isSeparator ? menuSeperator : menuItem
+    Rectangle {
-            property Component menuSeperator: Rectangle {
+        id: background
-                implicitHeight: 1
+
-                implicitWidth: menu.width
+        anchors.fill: menu
-                color: Theme.palette.basecontent
+        color: Theme.palette.base300
+        border.color: Theme.palette.base200
+        border.width: 2
+        radius: 8
+
+        opacity: 0
+
+        states: State {
+            name: "opened"
+            when: window.opened
+            PropertyChanges {
+                background {
+                    opacity: 1
+                }
             }
-            property Component menuItem: MenuItem {
+        }
-                menuEntry: modelData
+
+        transitions: [
+            Transition {
+                from: ""
+                to: "opened"
+                SequentialAnimation {
+                    ScriptAction {
+                        script: window.visible = true
+                    }
+                    NumberAnimation {
+                        property: "background.opacity"
+                        duration: 200
+                    }
+                }
+            },
+            Transition {
+                from: "opened"
+                to: ""
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: repeater.count * 15
+                    }
+                    NumberAnimation {
+                        property: "background.opacity"
+                        duration: 200
+                    }
+                    ScriptAction {
+                        script: window.visible = false
+                    }
+                }
+            }
+        ]
+    }
+
+    ColumnLayout {
+        id: menu
+
+        anchors.margins: 30
+
+        Repeater {
+            id: repeater
+            model: window.menuOpener.children
+            delegate: Loader {
+                id: loader
+
+                required property QsMenuEntry modelData
+                required property int index
+
+                active: true
+
+                opacity: 0
+
+                Layout.minimumWidth: 120
+
+                sourceComponent: modelData.isSeparator ? menuSeperator : menuItem
+                property Component menuSeperator: Rectangle {
+                    implicitWidth: menu.width
+                    implicitHeight: 2
+
+                    color: Theme.palette.base100
+                }
+                property Component menuItem: MenuItem {
+                    menuEntry: modelData
+                }
+
+                states: State {
+                    name: "opened"
+                    when: window.opened
+                    PropertyChanges {
+                        loader {
+                            opacity: 1
+                        }
+                    }
+                }
+
+                transitions: [
+                    Transition {
+                        from: ""
+                        to: "opened"
+                        SequentialAnimation {
+                            PauseAnimation {
+                                duration: 15 * loader.index
+                            }
+                            NumberAnimation {
+                                property: "opacity"
+                                duration: 100
+                            }
+                        }
+                    },
+                    Transition {
+                        from: "opened"
+                        to: ""
+                        SequentialAnimation {
+                            PauseAnimation {
+                                duration: 15 * (repeater.count - loader.index)
+                            }
+                            NumberAnimation {
+                                property: "opacity"
+                                duration: 200
+                            }
+                        }
+                    }
+                ]
             }
         }
     }

modules/bar/components/tray/menu/MenuItem.qml

@@ -16,6 +16,8 @@ Clickable {
     StyledText {
         id: text
 
+        opacity: item.opacity
+
         font.pixelSize: Dimensions.clock.fontSize
         anchors.verticalCenter: parent.verticalCenter
         topPadding: Dimensions.clock.verticalPadding