fix links on reference menu for mobile

main.py

@@ -265,8 +265,8 @@ ui.run()
 async def reference_page(client: Client):
     add_head_html()
     add_header()
-    with ui.left_drawer().classes('bg-[#eee] mt-[-20px] px-8 py-20').style('height: calc(100% + 20px) !important'):
-        menu = ui.column().classes('gap-1')
+    menu = ui.left_drawer() \
+        .classes('column no-wrap gap-1 bg-[#eee] mt-[-20px] px-8 py-20').style('height: calc(100% + 20px) !important')
     ui.add_head_html('<style>html {scroll-behavior: auto;}</style>')
     with ui.column().classes('w-full p-8 lg:p-16 max-w-[1250px] mx-auto'):
         section_heading('Documentation and Examples', '*API* Reference')

nicegui/ui.py

@@ -61,6 +61,7 @@ from .functions.open import open
 from .functions.timer import Timer as timer
 from .functions.update import update
 from .page import page
+from .page_layout import Drawer as drawer
 from .page_layout import Footer as footer
 from .page_layout import Header as header
 from .page_layout import LeftDrawer as left_drawer

website/example.py

@@ -29,7 +29,7 @@ class example:
 
     def __init__(self,
                  content: Union[Callable, type, str],
-                 menu: Optional[ui.element],
+                 menu: Optional[ui.drawer],
                  browser_title: Optional[str] = None,
                  immediate: bool = False) -> None:
         self.content = content
@@ -60,7 +60,11 @@ class example:
 
             ui.html(html).classes('documentation bold-links arrow-links')
             with self.menu or contextlib.nullcontext():
-                ui.link(headline, f'#{headline_id}')
+                async def click():
+                    if await ui.run_javascript(f'!!document.querySelector("div.q-drawer__backdrop")'):
+                        self.menu.hide()
+                        ui.open(f'#{headline_id}')
+                ui.link(headline, f'#{headline_id}').props('data-close-overlay').on('click', click)
 
             with ui.column().classes('w-full items-stretch gap-8 no-wrap min-[1500px]:flex-row'):
                 code = inspect.getsource(f).split('# END OF EXAMPLE')[0].strip().splitlines()