10 - Full Width Navbar and Content

codingforentrepreneurs · codingforentrepreneurs · commit 1cac2f892b8b · 2024-06-11T12:02:56.000-06:00
diff --git a/full_stack_python/full_stack_python.py b/full_stack_python/full_stack_python.py
@@ -18,8 +18,7 @@ def did_click(self):
 
 def index() -> rx.Component:
     # Welcome Page (Index)
-    return base_page(
-        rx.vstack(
+    my_child = rx.vstack(
             rx.heading(State.label, size="9"),
             rx.text(
                 "Get started by editing ",
@@ -30,7 +29,7 @@ def index() -> rx.Component:
             rx.input(
                 default_value=State.label,
                 on_click=State.did_click,
-                on_change=State.handle_title_input_change
+                on_change=State.handle_title_input_change,
             ),
             rx.link(
                 rx.button("Check out our docs!"),
@@ -39,9 +38,12 @@ def index() -> rx.Component:
             ),
             spacing="5",
             justify="center",
+            align="center",
+            # text_align="center",
             min_height="85vh",
+            id='my-child'
         )
-    )
+    return base_page(my_child)
 
 
 app = rx.App()
diff --git a/full_stack_python/ui/base.py b/full_stack_python/ui/base.py
@@ -12,10 +12,17 @@ def base_page(child: rx.Component, hide_navbar=False, *args, **kwargs) -> rx.Com
             rx.logo(),
             rx.color_mode.button(position="bottom-left"),
     )
-    return rx.container(
+    return rx.fragment( # renders nada
         navbar(),
-        child,
+        rx.box(
+            child,
+            # bg=rx.color("accent", 3),
+            padding="1em",
+            width="100%",
+            id="my-content-area-el"
+        ),
         rx.logo(),
-        rx.color_mode.button(position="bottom-left", id='my-light-mode-btn'),
+        rx.color_mode.button(position="bottom-left"),
+        padding='10em',
         id="my-base-container"
     )
