Update base template styling (#2050)

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
+    │   ├── __init__.py
-    │ ├── dashboard.py
+    │   ├── dashboard.py
-    │ ├── index.py
+    │   ├── index.py
-    │ ├── settings.py
+    │   └── settings.py
-    │ └── template.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

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(
+            rx.text("Docs"),
-                "Docs",
-            ),
             href="https://reflex.dev/docs/getting-started/introduction/",
         ),
         rx.link(
-            rx.text(
+            rx.text("Blog"),
-                "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",

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.
 

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.
+    The base state is used to store general vars used throughout the app.
-    sidebar_displayed: bool = True
+    """
 
-    def toggle_sidebar_displayed(self) -> None:
+    pass
-        """Toggle the sidebar displayed."""
-        self.sidebar_displayed = not self.sidebar_displayed

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(
+    "width": "100%",
-        State.sidebar_displayed,
-        f"calc({content_width_vw} - {sidebar_width})",
-        content_width_vw,
-    ),
-    "min-width": sidebar_width,
     "align_items": "flex-start",
     "box_shadow": box_shadow,
     "border_radius": border_radius,

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

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",

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,
         )