45 - Sidebar Toggle Button and Color Mode Condition

Author: codingforentrepreneurs

full_stack_python/ui/base.py

@@ -20,7 +20,7 @@ def base_layout_component(child, *args, **kwargs) -> rx.Component:
     )
 
 def base_page(child: rx.Component, *args, **kwargs) -> rx.Component:
-    is_logged_in = False
+    is_logged_in = True
     if not isinstance(child,rx. Component):
         child = rx.heading("this is not a valid child element")
     return rx.cond(

full_stack_python/ui/sidebar.py

@@ -1,7 +1,41 @@
 import reflex as rx 
+from reflex.style import toggle_color_mode
 
 from .. import navigation 
 
+def sidebar_dark_mode_toggle_item() -> rx.Component:
+    return rx.box(
+        rx.hstack(
+            rx.color_mode_cond(
+                light=rx.icon("moon"),
+                dark=rx.icon("sun"),
+            ),
+            rx.text(rx.color_mode_cond(
+                light="Turn dark mode on",
+                dark="Turn light mode on",
+            ), size="4"),
+            width="100%",
+            padding_x="0.5rem",
+            padding_y="0.75rem",
+            align="center",
+            style={
+                "_hover": {
+                    "cursor": "pointer", # css
+                    "bg": rx.color("accent", 4),
+                    "color": rx.color("accent", 11),
+                },
+                "color": rx.color("accent", 11),
+                "border-radius": "0.5em",
+            },
+        ),
+        on_click=toggle_color_mode,
+        as_='button',
+        underline="none",
+        weight="medium",
+        width="100%",
+    )
+
+
 def sidebar_item(
     text: str, icon: str, href: str
 ) -> rx.Component:
@@ -61,9 +95,7 @@ def sidebar() -> rx.Component:
                 rx.spacer(),
                 rx.vstack(
                     rx.vstack(
-                        sidebar_item(
-                            "Settings", "settings", "/#"
-                        ),
+                        sidebar_dark_mode_toggle_item(),
                         sidebar_item(
                             "Log out", "log-out", "/#"
                         ),