7 - Using the Navbar Recipe

Author: codingforentrepreneurs

Diff for: assets/logo.jpg

@@ -15,8 +15,89 @@ def handle_title_input_change(self, val):
     def did_click(self):
         print("Hello world did click")
 
+def navbar_link(text: str, url: str) -> rx.Component:
+    return rx.link(
+        rx.text(text, size="4", weight="medium"), href=url
+    )
+
+
 def navbar() -> rx.Component:
-    return rx.heading("SaaS", size="9"),
+    return rx.box(
+        rx.desktop_only(
+            rx.hstack(
+                rx.hstack(
+                    rx.image(
+                        src="/logo.jpg",
+                        width="2.25em",
+                        height="auto",
+                        border_radius="25%",
+                    ),
+                    rx.heading(
+                        "Reflex", size="7", weight="bold"
+                    ),
+                    align_items="center",
+                ),
+                rx.hstack(
+                    navbar_link("Home", "/#"),
+                    navbar_link("About", "/#"),
+                    navbar_link("Pricing", "/#"),
+                    navbar_link("Contact", "/#"),
+                    spacing="5",
+                ),
+                rx.hstack(
+                    rx.button(
+                        "Sign Up",
+                        size="3",
+                        variant="outline",
+                    ),
+                    rx.button("Log In", size="3"),
+                    spacing="4",
+                    justify="end",
+                ),
+                justify="between",
+                align_items="center",
+            ),
+        ),
+        rx.mobile_and_tablet(
+            rx.hstack(
+                rx.hstack(
+                    rx.image(
+                        src="/logo.jpg",
+                        width="2em",
+                        height="auto",
+                        border_radius="25%",
+                    ),
+                    rx.heading(
+                        "Reflex", size="6", weight="bold"
+                    ),
+                    align_items="center",
+                ),
+                rx.menu.root(
+                    rx.menu.trigger(
+                        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.separator(),
+                        rx.menu.item("Log in"),
+                        rx.menu.item("Sign up"),
+                    ),
+                    justify="end",
+                ),
+                justify="between",
+                align_items="center",
+            ),
+        ),
+        bg=rx.color("accent", 3),
+        padding="1em",
+        # position="fixed",
+        # top="0px",
+        # z_index="5",
+        width="100%",
+    )
 
 def base_page(child: rx.Component, hide_navbar=False, *args, **kwargs) -> rx.Component:
     # print([type(x) for x in args])
@@ -59,8 +140,7 @@ def index() -> rx.Component:
             spacing="5",
             justify="center",
             min_height="85vh",
-        ),
-        hide_navbar=True
+        )
     )