fancy open animation, but still no padding

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
-        implicitHeight: menu.height
-
-        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,30 +1,146 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import "../../../../../config/"
 import "../../../../../styled/"
 
-ColumnLayout {
+PopupWindow {
-    id: menu
+    id: window
-    property QsMenuOpener menuOpener
 
-    anchors.margins: 8
+    property QsMenuOpener menuOpener
+    property bool opened: false
+
+    color: 'transparent'
+
+    implicitWidth: menu.width
+    implicitHeight: menu.height
+
+    Rectangle {
+        id: background
+
+        anchors.fill: menu
+        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
+                }
+            }
+        }
+
+        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 {
-        model: menuOpener.children
+            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 {
-                implicitHeight: 1
                     implicitWidth: menu.width
-                color: Theme.palette.basecontent
+                    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