move context menu documentation onto a separate page

nicegui/elements/menu.py

@@ -35,6 +35,12 @@ class Menu(ValueElement):
 class ContextMenu(Element):
 
     def __init__(self) -> None:
+        """Context Menu
+
+        Creates a context menu based on Quasar's `QMenu <https://quasar.dev/vue-components/menu>`_ component.
+        The context menu should be placed inside the element where it should be shown.
+        It is automatically opened when the user right-clicks on the element and appears at the mouse position.
+        """
         super().__init__('q-menu')
         self._props['context-menu'] = True
         self._props['touch-position'] = True

website/documentation.py

@@ -187,6 +187,7 @@ def create_full() -> None:
     load_demo(ui.timeline)
     load_demo(ui.carousel)
     load_demo(ui.menu)
+    load_demo(ui.context_menu)
 
     @text_demo('Tooltips', '''
         Simply call the `tooltip(text:str)` method on UI elements to provide a tooltip.

website/more_documentation/context_menu_documentation.py

@@ -0,0 +1,10 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    with ui.image('https://picsum.photos/id/377/640/360'):
+        with ui.context_menu():
+            ui.menu_item('Flip horizontally')
+            ui.menu_item('Flip vertically')
+            ui.separator()
+            ui.menu_item('Reset')

website/more_documentation/menu_documentation.py

@@ -1,7 +1,5 @@
 from nicegui import ui
 
-from ..documentation_tools import text_demo
-
 
 def main_demo() -> None:
     with ui.row().classes('w-full items-center'):
@@ -14,17 +12,3 @@ def main_demo() -> None:
                              lambda: result.set_text('Selected item 3'), auto_close=False)
                 ui.separator()
                 ui.menu_item('Close', on_click=menu.close)
-
-
-def more() -> None:
-    @text_demo('Context Menu', '''
-        For context menus, use `ui.context_menu()` instead of `ui.menu()`.
-        It will open the menu on right-click at the current mouse position.
-    ''')
-    def context_menu() -> None:
-        with ui.image('https://picsum.photos/id/377/640/360'):
-            with ui.context_menu():
-                ui.menu_item('Flip horizontally')
-                ui.menu_item('Flip vertically')
-                ui.separator()
-                ui.menu_item('Reset')