diff --git a/reflex/.templates/apps/base/README.md b/reflex/.templates/apps/base/README.md index 7181696aa..ca97c47aa 100644 --- a/reflex/.templates/apps/base/README.md +++ b/reflex/.templates/apps/base/README.md @@ -14,24 +14,25 @@ reflex init --template blank This template has the following directory structure: ```bash -. +├── README.md ├── assets -├── requirements.txt ├── rxconfig.py └── {your_app} ├── __init__.py ├── components - │ └── sidebar.py + │   ├── __init__.py + │   └── sidebar.py ├── pages - │ ├── __init__.py - │ ├── dashboard.py - │ ├── index.py - │ ├── settings.py - │ └── template.py + │   ├── __init__.py + │   ├── dashboard.py + │   ├── index.py + │   └── settings.py ├── state.py ├── styles.py + ├── templates + │   ├── __init__.py + │   └── template.py └── {your_app}.py - ``` See the [Project Structure docs](https://reflex.dev/docs/getting-started/project-structure/) for more information on general Reflex project structure. @@ -50,7 +51,7 @@ To add a new page: 1. Add a new file in `{your_app}/pages/`. We recommend using one file per page, but you can also group pages in a single file. 2. Add a new function with the `@template` decorator, which takes the same arguments as `@rx.page`. -3. Import the page in your `{your_app}/{your_app}.py` file and it will automatically be added to the app. +3. Import the page in your `{your_app}/pages/__init__.py` file and it will automatically be added to the app. ### Adding Components diff --git a/reflex/.templates/apps/base/code/components/sidebar.py b/reflex/.templates/apps/base/code/components/sidebar.py index fc0f13f9b..b781f29ec 100644 --- a/reflex/.templates/apps/base/code/components/sidebar.py +++ b/reflex/.templates/apps/base/code/components/sidebar.py @@ -49,35 +49,13 @@ def sidebar_footer() -> rx.Component: The sidebar footer component. """ return rx.hstack( - rx.link( - rx.center( - rx.image( - src="/paneleft.svg", - height="2em", - padding="0.5em", - ), - bg="transparent", - border_radius=styles.border_radius, - **styles.hover_accent_bg, - ), - on_click=State.toggle_sidebar_displayed, - transform=rx.cond(~State.sidebar_displayed, "rotate(180deg)", ""), - transition="transform 0.5s, left 0.5s", - position="relative", - left=rx.cond(State.sidebar_displayed, "0px", "20.5em"), - **styles.overlapping_button_style, - ), rx.spacer(), rx.link( - rx.text( - "Docs", - ), + rx.text("Docs"), href="https://reflex.dev/docs/getting-started/introduction/", ), rx.link( - rx.text( - "Blog", - ), + rx.text("Blog"), href="https://reflex.dev/blog/", ), width="100%", @@ -162,6 +140,7 @@ def sidebar() -> rx.Component: sidebar_footer(), height="100dvh", ), + display=["none", "none", "block"], min_width=styles.sidebar_width, height="100%", position="sticky", diff --git a/reflex/.templates/apps/base/code/pages/index.py b/reflex/.templates/apps/base/code/pages/index.py index af0949d76..62f1fb4ca 100644 --- a/reflex/.templates/apps/base/code/pages/index.py +++ b/reflex/.templates/apps/base/code/pages/index.py @@ -6,7 +6,7 @@ from code.templates import template import reflex as rx -@template(route="/", title="Home", image="/logo.svg") +@template(route="/", title="Home", image="/github.svg") def index() -> rx.Component: """The home page. diff --git a/reflex/.templates/apps/base/code/state.py b/reflex/.templates/apps/base/code/state.py index e3df11c7a..7efea12f5 100644 --- a/reflex/.templates/apps/base/code/state.py +++ b/reflex/.templates/apps/base/code/state.py @@ -4,11 +4,9 @@ import reflex as rx class State(rx.State): - """State for the app.""" + """Base state for the app. - # Whether the sidebar is displayed. - sidebar_displayed: bool = True + The base state is used to store general vars used throughout the app. + """ - def toggle_sidebar_displayed(self) -> None: - """Toggle the sidebar displayed.""" - self.sidebar_displayed = not self.sidebar_displayed + pass diff --git a/reflex/.templates/apps/base/code/styles.py b/reflex/.templates/apps/base/code/styles.py index 1b53f611b..08a37de29 100644 --- a/reflex/.templates/apps/base/code/styles.py +++ b/reflex/.templates/apps/base/code/styles.py @@ -1,5 +1,4 @@ """Styles for the app.""" -from code.state import State import reflex as rx @@ -20,12 +19,7 @@ template_page_style = { } template_content_style = { - "width": rx.cond( - State.sidebar_displayed, - f"calc({content_width_vw} - {sidebar_width})", - content_width_vw, - ), - "min-width": sidebar_width, + "width": "100%", "align_items": "flex-start", "box_shadow": box_shadow, "border_radius": border_radius, diff --git a/reflex/.templates/apps/base/code/templates/template.py b/reflex/.templates/apps/base/code/templates/template.py index 93a3296d0..da62f2ad0 100644 --- a/reflex/.templates/apps/base/code/templates/template.py +++ b/reflex/.templates/apps/base/code/templates/template.py @@ -2,7 +2,6 @@ from code import styles from code.components.sidebar import sidebar -from code.state import State from typing import Callable import reflex as rx @@ -22,6 +21,8 @@ def menu_button() -> rx.Component: Returns: The menu button component. """ + from reflex.page import get_decorated_pages + return rx.box( rx.menu( rx.menu_button( @@ -32,7 +33,16 @@ def menu_button() -> rx.Component: ), ), rx.menu_list( - rx.menu_item(rx.link("Home", href="/", width="100%")), + *[ + rx.menu_item( + rx.link( + page["title"], + href=page["route"], + width="100%", + ) + ) + for page in get_decorated_pages() + ], rx.menu_divider(), rx.menu_item( rx.link("About", href="https://github.com/reflex-dev", width="100%") @@ -50,12 +60,24 @@ def menu_button() -> rx.Component: def template( - **page_kwargs: dict, + route: str | None = None, + title: str | None = None, + image: str | None = None, + description: str | None = None, + meta: str | None = None, + script_tags: list[rx.Component] | None = None, + on_load: rx.event.EventHandler | list[rx.event.EventHandler] | None = None, ) -> Callable[[Callable[[], rx.Component]], rx.Component]: """The template for each page of the app. Args: - page_kwargs: Keyword arguments to pass to the page. + route: The route to reach the page. + title: The title of the page. + image: The favicon of the page. + description: The description of the page. + meta: Additionnal meta to add to the page. + on_load: The event handler(s) called when the page load. + script_tags: Scripts to attach to the page. Returns: The template with the page content. @@ -71,9 +93,17 @@ def template( The template with the page content. """ # Get the meta tags for the page. - page_kwargs["meta"] = [*default_meta, *page_kwargs.get("meta", [])] + all_meta = [*default_meta, *(meta or [])] - @rx.page(**page_kwargs) + @rx.page( + route=route, + title=title, + image=image, + description=description, + meta=all_meta, + script_tags=script_tags, + on_load=on_load, + ) def templated_page(): return rx.hstack( sidebar(), @@ -89,9 +119,6 @@ def template( align_items="flex-start", transition="left 0.5s, width 0.5s", position="relative", - left=rx.cond( - State.sidebar_displayed, "0px", f"-{styles.sidebar_width}" - ), ) return templated_page diff --git a/reflex/.templates/apps/demo/code/sidebar.py b/reflex/.templates/apps/demo/code/sidebar.py index e4cd1672a..343da6e27 100644 --- a/reflex/.templates/apps/demo/code/sidebar.py +++ b/reflex/.templates/apps/demo/code/sidebar.py @@ -169,6 +169,7 @@ def sidebar() -> rx.Component: sidebar_footer(), height="100dvh", ), + display=["none", "none", "block"], min_width=sidebar_width, height="100%", position="sticky", diff --git a/reflex/reflex.py b/reflex/reflex.py index 18b604b3d..6f29a6b43 100644 --- a/reflex/reflex.py +++ b/reflex/reflex.py @@ -719,12 +719,12 @@ def demo( _init( name="reflex_demo", template=constants.Templates.Kind.DEMO, - loglevel=constants.LogLevel.DEBUG, + loglevel=constants.LogLevel.ERROR, ) _run( frontend_port=frontend_port, backend_port=backend_port, - loglevel=constants.LogLevel.DEBUG, + loglevel=constants.LogLevel.ERROR, )