add page layout example

api_docs_and_examples.py

@@ -661,6 +661,30 @@ Also it is possible to do async stuff while the user already sees the content ad
 
         ui.link('show page-ready code after yield', '/yield_page_ready')
 
+    page_layout = '''#### Page Layout
+
+With `ui.header`, `ui.footer`, `ui.left_drawer` and `ui.right_drawer` you can add additional layout elements to a page.
+The `fixed` argument controls whether the element should scroll or stay fixed on the screen.
+The `top_corner` and `bottom_corner` arguments indicate whether a drawer should expand to the top or bottom of the page.
+See <https://quasar.dev/layout/header-and-footer> and <https://quasar.dev/layout/drawer> for more information about possible props like
+`elevated`, `bordered` and many more.
+    '''
+    with example(page_layout):
+        @ui.page('/page_layout')
+        async def page_layout():
+            ui.label('CONTENT')
+            [ui.label(f'Line {i}') for i in range(100)]
+            with ui.header().style('background-color: #3874c8').props('elevated'):
+                ui.label('HEADER')
+            with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #d7e3f4'):
+                ui.label('LEFT DRAWER')
+            with ui.right_drawer(fixed=False).style('background-color: #ebf1fa').props('bordered'):
+                ui.label('RIGHT DRAWER')
+            with ui.footer().style('background-color: #3874c8'):
+                ui.label('FOOTER')
+
+        ui.link('show page with fancy layout', page_layout)
+
     with example(ui.open):
         @ui.page('/yet_another_page')
         def yet_another_page():