15 - Navigation State

codingforentrepreneurs · codingforentrepreneurs · commit 24556eb3d4ff · 2024-06-12T11:37:11.000-06:00
diff --git a/full_stack_python/navigation/__init__.py b/full_stack_python/navigation/__init__.py
@@ -1,5 +1,8 @@
 from . import routes
+from .state import NavState
+
 
 __all__ = [
-    'routes'
+    'routes',
+    'NavState'
 ]
diff --git a/full_stack_python/navigation/state.py b/full_stack_python/navigation/state.py
@@ -0,0 +1,14 @@
+import reflex as rx
+
+from . import routes
+
+class NavState(rx.State):
+    def to_home(self):
+        return rx.redirect(routes.HOME_ROUTE)
+    def to_about_us(self):
+        return rx.redirect(routes.ABOUT_US_ROUTE)
+    def to_contact(self):
+        return rx.redirect(routes.CONTACT_US_ROUTE)
+    def to_pricing(self):
+        return rx.redirect(routes.PRICING_ROUTE)
+    
diff --git a/full_stack_python/pages/__init__.py b/full_stack_python/pages/__init__.py
@@ -1,7 +1,9 @@
 from .about import about_page
 from .pricing import pricing_page
+from .contact import contact_page
 
 __all__ = [ 
     'about_page',
+    'contact_page',
     'pricing_page'
 ]
diff --git a/full_stack_python/pages/contact.py b/full_stack_python/pages/contact.py
@@ -0,0 +1,19 @@
+import reflex as rx 
+
+from .. import navigation
+from ..ui.base import base_page
+
+@rx.page(route=navigation.routes.CONTACT_US_ROUTE)
+def contact_page() -> rx.Component:
+    my_child = rx.vstack(
+            rx.heading("Contact Us", size="9"),
+            rx.text(
+                "Something cool about us.",
+            ),
+            spacing="5",
+            justify="center",
+            align="center",
+            min_height="85vh",
+            id='my-child'
+        )
+    return base_page(my_child)
diff --git a/full_stack_python/ui/nav.py b/full_stack_python/ui/nav.py
@@ -71,10 +71,14 @@ def navbar() -> rx.Component:
                         rx.icon("menu", size=30)
                     ),
                     rx.menu.content(
-                        rx.menu.item("Home"),
-                        rx.menu.item("About"),
-                        rx.menu.item("Pricing"),
-                        rx.menu.item("Contact"),
+                        rx.menu.item("Home", 
+                            on_click=navigation.NavState.to_home),
+                        rx.menu.item("About", 
+                            on_click=navigation.NavState.to_about_us),
+                        rx.menu.item("Pricing", 
+                            on_click=navigation.NavState.to_pricing),
+                        rx.menu.item("Contact", 
+                            on_click=navigation.NavState.to_contact),
                         rx.menu.separator(),
                         rx.menu.item("Log in"),
                         rx.menu.item("Sign up"),

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,8 @@`
`1`	`1`	`from . import routes`
	`2`	`+from .state import NavState`
	`3`	`+`
`2`	`4`
`3`	`5`	`__all__ = [`
`4`		`- 'routes'`
	`6`	`+ 'routes',`
	`7`	`+ 'NavState'`
`5`	`8`	`]`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,9 @@`
`1`	`1`	`from .about import about_page`
`2`	`2`	`from .pricing import pricing_page`
	`3`	`+from .contact import contact_page`
`3`	`4`
`4`	`5`	`__all__ = [`
`5`	`6`	`'about_page',`
	`7`	`+ 'contact_page',`
`6`	`8`	`'pricing_page'`
`7`	`9`	`]`