diff --git a/reflex/.templates/apps/sidebar/README.md b/reflex/.templates/apps/sidebar/README.md index d01f481aa..3d7fa13a9 100644 --- a/reflex/.templates/apps/sidebar/README.md +++ b/reflex/.templates/apps/sidebar/README.md @@ -41,7 +41,7 @@ See the [Project Structure docs](https://reflex.dev/docs/getting-started/project In this template, the pages in your app are defined in `{your_app}/pages/`. Each page is a function that returns a Reflex component. For example, to edit this page you can modify `{your_app}/pages/index.py`. -See the [pages docs](https://reflex.dev/docs/components/pages/) for more information on pages. +See the [pages docs](https://reflex.dev/docs/pages/routes/) for more information on pages. In this template, instead of using `rx.add_page` or the `@rx.page` decorator, we use the `@template` decorator from `{your_app}/templates/template.py`. diff --git a/reflex/.templates/apps/sidebar/assets/icon.svg b/reflex/.templates/apps/sidebar/assets/reflex_black.svg similarity index 100% rename from reflex/.templates/apps/sidebar/assets/icon.svg rename to reflex/.templates/apps/sidebar/assets/reflex_black.svg diff --git a/reflex/.templates/apps/sidebar/assets/reflex_white.svg b/reflex/.templates/apps/sidebar/assets/reflex_white.svg new file mode 100644 index 000000000..63876bdd1 --- /dev/null +++ b/reflex/.templates/apps/sidebar/assets/reflex_white.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/reflex/.templates/apps/sidebar/code/components/sidebar.py b/reflex/.templates/apps/sidebar/code/components/sidebar.py index 8e3d2f736..02b418054 100644 --- a/reflex/.templates/apps/sidebar/code/components/sidebar.py +++ b/reflex/.templates/apps/sidebar/code/components/sidebar.py @@ -11,17 +11,17 @@ def sidebar_header() -> rx.Component: Returns: The sidebar header component. """ - return rx.chakra.hstack( + return rx.hstack( # The logo. - rx.chakra.image( - src="/icon.svg", - height="2em", + rx.color_mode_cond( + rx.image(src="/reflex_black.svg", height="2em"), + rx.image(src="/reflex_white.svg", height="2em"), ), - rx.chakra.spacer(), + rx.spacer(), # Link to Reflex GitHub repo. - rx.chakra.link( - rx.chakra.center( - rx.chakra.image( + rx.link( + rx.center( + rx.image( src="/github.svg", height="3em", padding="0.5em", @@ -35,6 +35,7 @@ def sidebar_header() -> rx.Component: ), href="https://github.com/reflex-dev/reflex", ), + align="center", width="100%", border_bottom=styles.border, padding="1em", @@ -47,15 +48,17 @@ def sidebar_footer() -> rx.Component: Returns: The sidebar footer component. """ - return rx.chakra.hstack( - rx.chakra.spacer(), - rx.chakra.link( - rx.chakra.text("Docs"), + return rx.hstack( + rx.spacer(), + rx.link( + rx.text("Docs"), href="https://reflex.dev/docs/getting-started/introduction/", + style=styles.link_style, ), - rx.chakra.link( - rx.chakra.text("Blog"), + rx.link( + rx.text("Blog"), href="https://reflex.dev/blog/", + style=styles.link_style, ), width="100%", border_top=styles.border, @@ -79,14 +82,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component: (rx.State.router.page.path == "/") & text == "Home" ) - return rx.chakra.link( - rx.chakra.hstack( - rx.chakra.image( + return rx.link( + rx.hstack( + rx.image( src=icon, height="2.5em", padding="0.5em", ), - rx.chakra.text( + rx.text( text, ), bg=rx.cond( @@ -99,6 +102,7 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component: styles.accent_text_color, styles.text_color, ), + align="center", border_radius=styles.border_radius, box_shadow=styles.box_shadow, width="100%", @@ -118,10 +122,10 @@ def sidebar() -> rx.Component: # Get all the decorated pages and add them to the sidebar. from reflex.page import get_decorated_pages - return rx.chakra.box( - rx.chakra.vstack( + return rx.box( + rx.vstack( sidebar_header(), - rx.chakra.vstack( + rx.vstack( *[ sidebar_item( text=page.get("title", page["route"].strip("/").capitalize()), @@ -135,7 +139,7 @@ def sidebar() -> rx.Component: align_items="flex-start", padding="1em", ), - rx.chakra.spacer(), + rx.spacer(), sidebar_footer(), height="100dvh", ), diff --git a/reflex/.templates/apps/sidebar/code/pages/dashboard.py b/reflex/.templates/apps/sidebar/code/pages/dashboard.py index bfe29615c..f64f9158d 100644 --- a/reflex/.templates/apps/sidebar/code/pages/dashboard.py +++ b/reflex/.templates/apps/sidebar/code/pages/dashboard.py @@ -1,4 +1,5 @@ """The dashboard page.""" + from code.templates import template import reflex as rx @@ -11,11 +12,11 @@ def dashboard() -> rx.Component: Returns: The UI for the dashboard page. """ - return rx.chakra.vstack( - rx.chakra.heading("Dashboard", font_size="3em"), - rx.chakra.text("Welcome to Reflex!"), - rx.chakra.text( + return rx.vstack( + rx.heading("Dashboard", size="8"), + rx.text("Welcome to Reflex!"), + rx.text( "You can edit this page in ", - rx.chakra.code("{your_app}/pages/dashboard.py"), + rx.code("{your_app}/pages/dashboard.py"), ), ) diff --git a/reflex/.templates/apps/sidebar/code/pages/settings.py b/reflex/.templates/apps/sidebar/code/pages/settings.py index 94b89d691..29fdb4b57 100644 --- a/reflex/.templates/apps/sidebar/code/pages/settings.py +++ b/reflex/.templates/apps/sidebar/code/pages/settings.py @@ -1,6 +1,6 @@ """The settings page.""" -from code.templates import template +from code.templates import ThemeState, template import reflex as rx @@ -12,11 +12,50 @@ def settings() -> rx.Component: Returns: The UI for the settings page. """ - return rx.chakra.vstack( - rx.chakra.heading("Settings", font_size="3em"), - rx.chakra.text("Welcome to Reflex!"), - rx.chakra.text( + return rx.vstack( + rx.heading("Settings", size="8"), + rx.hstack( + rx.text("Dark mode: "), + rx.color_mode.switch(), + ), + rx.hstack( + rx.text("Theme color: "), + rx.select( + [ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ], + value=ThemeState.accent_color, + on_change=ThemeState.set_accent_color, + ), + ), + rx.text( "You can edit this page in ", - rx.chakra.code("{your_app}/pages/settings.py"), + rx.code("{your_app}/pages/settings.py"), + size="1", ), ) diff --git a/reflex/.templates/apps/sidebar/code/styles.py b/reflex/.templates/apps/sidebar/code/styles.py index d11a1e580..924cc7113 100644 --- a/reflex/.templates/apps/sidebar/code/styles.py +++ b/reflex/.templates/apps/sidebar/code/styles.py @@ -4,12 +4,12 @@ import reflex as rx border_radius = "0.375rem" box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)" -border = "1px solid #F4F3F6" -text_color = "black" -accent_text_color = "#1A1060" -accent_color = "#F5EFFE" -hover_accent_color = {"_hover": {"color": accent_color}} -hover_accent_bg = {"_hover": {"bg": accent_color}} +border = f"1px solid {rx.color('accent', 12)}" +text_color = rx.color("gray", 11) +accent_text_color = rx.color("accent", 10) +accent_color = rx.color("accent", 1) +hover_accent_color = {"_hover": {"color": accent_text_color}} +hover_accent_bg = {"_hover": {"background_color": accent_color}} content_width_vw = "90vw" sidebar_width = "20em" @@ -24,7 +24,7 @@ template_content_style = { } link_style = { - "color": text_color, + "color": accent_text_color, "text_decoration": "none", **hover_accent_color, } @@ -36,27 +36,25 @@ overlapping_button_style = { } base_style = { - rx.chakra.MenuButton: { - "width": "3em", - "height": "3em", + rx.menu.trigger: { **overlapping_button_style, }, - rx.chakra.MenuItem: hover_accent_bg, + rx.menu.item: hover_accent_bg, } markdown_style = { - "code": lambda text: rx.chakra.code(text, color="#1F1944", bg="#EAE4FD"), - "a": lambda text, **props: rx.chakra.link( + "code": lambda text: rx.code(text, color=accent_text_color, bg=accent_color), + "a": lambda text, **props: rx.link( text, **props, font_weight="bold", - color="#03030B", + color=accent_text_color, text_decoration="underline", - text_decoration_color="#AD9BF8", + text_decoration_color=accent_text_color, _hover={ - "color": "#AD9BF8", + "color": accent_color, "text_decoration": "underline", - "text_decoration_color": "#03030B", + "text_decoration_color": accent_color, }, ), } diff --git a/reflex/.templates/apps/sidebar/code/templates/__init__.py b/reflex/.templates/apps/sidebar/code/templates/__init__.py index 36f9d8423..54af7bc09 100644 --- a/reflex/.templates/apps/sidebar/code/templates/__init__.py +++ b/reflex/.templates/apps/sidebar/code/templates/__init__.py @@ -1 +1 @@ -from .template import template +from .template import ThemeState, template diff --git a/reflex/.templates/apps/sidebar/code/templates/template.py b/reflex/.templates/apps/sidebar/code/templates/template.py index 1ba46d309..67dc02052 100644 --- a/reflex/.templates/apps/sidebar/code/templates/template.py +++ b/reflex/.templates/apps/sidebar/code/templates/template.py @@ -17,6 +17,21 @@ default_meta = [ ] +def menu_item_link(text, href): + return rx.menu.item( + rx.link( + text, + href=href, + width="100%", + color="inherit", + ), + _hover={ + "color": styles.accent_color, + "background_color": styles.accent_text_color, + }, + ) + + def menu_button() -> rx.Component: """The menu button on the top right of the page. @@ -25,37 +40,24 @@ def menu_button() -> rx.Component: """ from reflex.page import get_decorated_pages - return rx.chakra.box( - rx.chakra.menu( - rx.chakra.menu_button( - rx.chakra.icon( - tag="hamburger", - size="4em", - color=styles.text_color, + return rx.box( + rx.menu.root( + rx.menu.trigger( + rx.icon( + "menu", + size=36, + color=styles.accent_text_color, ), + background_color=styles.accent_color, ), - rx.chakra.menu_list( + rx.menu.content( *[ - rx.chakra.menu_item( - rx.chakra.link( - page["title"], - href=page["route"], - width="100%", - ) - ) + menu_item_link(page["title"], page["route"]) for page in get_decorated_pages() ], - rx.chakra.menu_divider(), - rx.chakra.menu_item( - rx.chakra.link( - "About", href="https://github.com/reflex-dev", width="100%" - ) - ), - rx.chakra.menu_item( - rx.chakra.link( - "Contact", href="mailto:founders@=reflex.dev", width="100%" - ) - ), + rx.menu.separator(), + menu_item_link("About", "https://github.com/reflex-dev"), + menu_item_link("Contact", "mailto:founders@=reflex.dev"), ), ), position="fixed", @@ -65,6 +67,12 @@ def menu_button() -> rx.Component: ) +class ThemeState(rx.State): + """The state for the theme of the app.""" + + accent_color: str = "crimson" + + def template( route: str | None = None, title: str | None = None, @@ -101,6 +109,22 @@ def template( # Get the meta tags for the page. all_meta = [*default_meta, *(meta or [])] + def templated_page(): + return rx.hstack( + sidebar(), + rx.box( + rx.box( + page_content(), + **styles.template_content_style, + ), + **styles.template_page_style, + ), + menu_button(), + align="start", + transition="left 0.5s, width 0.5s", + position="relative", + ) + @rx.page( route=route, title=title, @@ -110,22 +134,12 @@ def template( script_tags=script_tags, on_load=on_load, ) - def templated_page(): - return rx.chakra.hstack( - sidebar(), - rx.chakra.box( - rx.chakra.box( - page_content(), - **styles.template_content_style, - ), - **styles.template_page_style, - ), - menu_button(), - align_items="flex-start", - transition="left 0.5s, width 0.5s", - position="relative", + def theme_wrap(): + return rx.theme( + templated_page(), + accent_color=ThemeState.accent_color, ) - return templated_page + return theme_wrap return decorator