make menu responsive

main.py

@@ -18,21 +18,30 @@ def add_head_html() -> None:
 
 
 def add_header() -> None:
+    menu_items = {
+        'Features': '/#features',
+        'Installation': '/#installation',
+        'Examples': '/#examples',
+        'API Reference': '/reference',
+        'Demos': '/#demos',
+        'Why?': '/#why',
+    }
     with ui.header() \
-            .classes('items-center duration-200 p-0 px-4') \
+            .classes('items-center duration-200 p-0 px-4 no-wrap') \
             .style('box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)'):
-        with ui.link(target=index_page).classes('row gap-4 items-center'):
+        with ui.link(target=index_page).classes('row gap-4 items-center no-wrap mr-auto'):
             svg.face().classes('w-8 stroke-white stroke-2')
             svg.word().classes('w-24')
-        with ui.row().classes('items-center ml-auto'):
-            header_link('Features', '/#features')
-            header_link('Installation', '/#installation')
-            header_link('Examples', '/#examples')
-            header_link('API Reference', reference_page)
-            header_link('Demos', '/#demos')
-            header_link('Why?', '/#why')
-            with ui.link(target='https://github.com/zauberzeug/nicegui/'):
-                svg.github().classes('fill-white scale-125 m-1')
+        with ui.row().classes('lg:hidden'):
+            with ui.menu().classes('bg-primary text-white text-lg') as menu:
+                for title, target in menu_items.items():
+                    ui.menu_item(title, on_click=lambda _, target=target: ui.open(target))
+            ui.button(on_click=menu.open).props('flat color=white icon=menu')
+        with ui.row().classes('max-lg:hidden'):
+            for title, target in menu_items.items():
+                header_link(title, target)
+        with ui.link(target='https://github.com/zauberzeug/nicegui/'):
+            svg.github().classes('fill-white scale-125 m-1')
 
 
 @ui.page('/')

website/static/style.css

@@ -1,6 +1,3 @@
-html {
-  scroll-behavior: smooth;
-}
 html,
 body {
   max-width: 100%;
@@ -60,3 +57,10 @@ dl.field-list dd {
   background-color: #5a99ff;
   width: 100%;
 }
+
+@media only screen and (min-width: 1024px) {
+  html {
+    /* prevent issues with smooth scrolling while menu is closing */
+    scroll-behavior: smooth;
+  }
+}