Update Menu docs

Apply suggestions from code review

Co-authored-by: Simon Hausmann <[email protected]>

docs/astro/src/content/docs/reference/window/contextmenu.mdx

@@ -1,19 +1,18 @@
 ---
 <!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
-title: Window
-description: Window element api.
+title: ContextMenu
+description: ContextMenu element api.
 ---
 import SlintProperty from '/src/components/SlintProperty.astro';
 import Link from '/src/components/Link.astro';
 
-`ContextMenu` is an invisible element that is used to show a context menu.
+Use the non-visual `ContextMenu` element to declare a context menu.
 
 The context menu is shown if the user right-clicks on the area covered by the `ContextMenu` element,
-or if the user presses the "Menu" key on their keyboard while a `FocusScope` within the `ContextMenu` is focused.
-It is also possible to show the context menu by calling the `show` function on the `ContextMenu` element.
+or if the user presses the "Menu" key on their keyboard while a `FocusScope` within the `ContextMenu` has focus.
+Call the `show()` function on the `ContextMenu` element to programmatically show the context menu.
 
-In addition to normal sub elements, the `ContextMenu` element can contain `MenuItem` elements.
-The MenuItem elements are defining the actual menu.
+Define the structure of the menu by placing `MenuItem` elements into the `ContextMenu`.
 
 ## Function
 
@@ -38,24 +37,27 @@ The label of the entry within the menu.
 #### activated()
 
 Invoked when the menu entry is activated.
-This is only called if the menu entry doesn't have submenus
+
+:::note{Note}
+This is only called if the menu entry doesn't have submenus.
+:::
 
 ## Example
 
 ```slint
 export component Example {
     ContextMenu {
         MenuItem {
-            title: "Copy";
-            activated => { debug("Copy"); }
+            title: @tr("Cut");
+            activated => { debug("Cut"); }
         }
         MenuItem {
-            title: "Paste";
-            activated => { debug("Paste"); }
+            title: @tr("Copy");
+            activated => { debug("Copy"); }
         }
         MenuItem {
-            title: "Cut";
-            activated => { debug("Cut"); }
+            title: @tr("Paste");
+            activated => { debug("Paste"); }
         }
     }
 }

docs/astro/src/content/docs/reference/window/window.mdx

@@ -61,14 +61,18 @@ The window title that is shown in the title bar.
 
 ## `MenuBar` element
 
-A `Window` can contain one `MenuBar` element. This special element is used to create a menu bar for that window.
+Place a single `MenuBar` element into a `Window` to declare a menu bar for the window.
+
+:::note{Note}
 There can only be one `MenuBar` element in a `Window` and it must not be in a `for` or a `if`.
+:::
+
 The `MenuBar` doesn't have properties, but it should contain <Link type="MenuItem" /> as children that represent top level entries in the menu bar.
-Each `MenuItem` can contain further `MenuItem` as children that represent sub-menu
+Nest `MenuItem` elements to declare sub-menus.
 
 Depending on the platform, the menu bar might be native or rendered by Slint.
-This means that for example, on MacOs, the menu bar be in top bar on the desktop where application usually have their top bar.
-The `width` and `height` property of the `Window` are the one of the client area, without counting the menu bar.
+This means that for example, on macOS, the menu bar will be at the top of the screen.
+The `width` and `height` property of the `Window` define the client area, excluding the menu bar.
 The `x` and `y` properties of `Window` children are also relative to the client area.
 
 ### Example
@@ -77,21 +81,33 @@ The `x` and `y` properties of `Window` children are also relative to the client
 export component Example inherits Window {
     MenuBar {
         MenuItem {
-            title: "File";
+            title: @tr("File");
             MenuItem {
-                title: "New";
+                title: @tr("New");
             }
             MenuItem {
-                title: "Open";
+                title: @tr("Open");
             }
         }
         MenuItem {
-            title: "Edit";
+            title: @tr("Edit");
+            MenuItem {
+                title: @tr("Copy");
+            }
             MenuItem {
-                title: "Copy";
+                title: @tr("Paste");
             }
             MenuItem {
-                title: "Paste";
+                title: @tr("Find");
+                MenuItem {
+                    title: @tr("Find in document...");
+                }
+                MenuItem {
+                    title: @tr("Find Next");
+                }
+                MenuItem {
+                    title: @tr("Find Previous");
+                }
             }
         }
     }