feat: add menu component

AppMenu.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Controls.Basic
+
+Menu {
+    id: menu
+
+    topPadding: 2
+    bottomPadding: 2
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        color: Theme.card
+        radius: Theme.radius
+    }
+
+    delegate: MenuItem {
+        id: menuItem
+        implicitWidth: 200
+        implicitHeight: 40
+
+        contentItem: Text {
+            leftPadding: menuItem.indicator.width
+            rightPadding: menuItem.arrow.width
+            text: menuItem.text
+            font: menuItem.font
+            opacity: enabled ? 1.0 : 0.3
+            color: Theme.foreground
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        background: Rectangle {
+            implicitWidth: 200
+            implicitHeight: 40
+            opacity: enabled ? 1 : 0.3
+            color: menuItem.highlighted ? Theme.highlight : "transparent"
+        }
+    }
+}

CMakeLists.txt

@@ -28,6 +28,7 @@ set(plain_qml_files
   AppImage.qml
   AppLink.qml
   AppWarning.qml
+  AppMenu.qml
 )
 set(qml_singletons
   Fonts.qml

gallery/Main.qml

@@ -124,5 +124,23 @@ AppWindow {
         AppWarning {
           Layout.fillWidth: true
         }
+
+        AppMenu {
+          id: menu
+
+          Action { text: qsTr("Tool Bar"); checkable: true }
+          Action { text: qsTr("Side Bar"); checkable: true; checked: true }
+          Action { text: qsTr("Status Bar"); checkable: true; checked: true }
+
+          MenuSeparator {}
+
+          Action { text: "Hello" }
+
+          // NOTE: MenuItem is not recommended as it isn't consistent with the menu theming. Please use Action until a fix is made.
+        }
+        AppSecondaryButton {
+          onClicked: menu.open()
+          text: "Open menu"
+        }
     }
 }