Added base template + improve templating code

reflex/.templates/apps/base/code/__init__ .py

@@ -0,0 +1 @@
+"""Base template for Reflex."""

reflex/.templates/apps/base/code/base.py

@@ -0,0 +1,86 @@
+"""Welcome to Reflex! This file outlines the steps to create a basic app."""
+from typing import Callable
+
+import reflex as rx
+
+from .pages import dashboard_page, home_page, settings_page
+from .sidebar import sidebar
+from .styles import *
+
+
+def template(main_content: Callable[[], rx.Component]) -> rx.Component:
+    """The template for each page of the app.
+
+    Args:
+        main_content (Callable[[], rx.Component]): The main content of the page.
+
+    Returns:
+        rx.Component: The template for each page of the app.
+    """
+    menu_button = rx.box(
+        rx.menu(
+            rx.menu_button(
+                rx.icon(
+                    tag="hamburger",
+                    size="4em",
+                    color=text_color,
+                ),
+            ),
+            rx.menu_list(
+                rx.menu_item(rx.link("Home", href="/", width="100%")),
+                rx.menu_divider(),
+                rx.menu_item(rx.link("About", href="https://github.com/reflex-dev", width="100%")),
+                rx.menu_item(rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%")),
+            ),
+        ),
+        position="fixed",
+        right="1.5em",
+        top="1.5em",
+        z_index="500",
+    )
+
+    return rx.hstack(
+        sidebar(),
+        main_content(),
+        rx.spacer(),
+        menu_button,
+        align_items="flex-start",
+    )
+
+
+@rx.page("/")
+@template
+def home() -> rx.Component:
+    """Home page.
+
+    Returns:
+        rx.Component: The home page.
+    """
+    return home_page()
+
+
+@rx.page("/settings")
+@template
+def settings() -> rx.Component:
+    """Settings page.
+
+    Returns:
+        rx.Component: The settings page.
+    """
+    return settings_page()
+
+
+@rx.page("/dashboard")
+@template
+def dashboard() -> rx.Component:
+    """Dashboard page.
+
+    Returns:
+        rx.Component: The dashboard page.
+    """
+    return dashboard_page()
+
+
+# Add state and page to the app.
+app = rx.App(style=base_style)
+app.compile()

reflex/.templates/apps/base/code/pages/__init__.py

@@ -0,0 +1,4 @@
+"""The pages of the app."""
+from .dashboard import dashboard_page
+from .home import home_page
+from .settings import settings_page

reflex/.templates/apps/base/code/pages/dashboard.py

@@ -0,0 +1,28 @@
+"""The dashboard page for the template."""
+import reflex as rx
+
+from ..styles import *
+
+
+def dashboard_page() -> rx.Component:
+    """The UI for the dashboard page.
+
+    Returns:
+        rx.Component: The UI for the dashboard page.
+    """
+    return rx.box(
+        rx.vstack(
+            rx.heading(
+                "Dashboard",
+                size="3em",
+            ),
+            rx.text(
+                "Welcome to Reflex!",
+            ),
+            rx.text(
+                "You can use this template to get started with Reflex.",
+            ),
+            style=template_content_style,
+        ),
+        style=template_page_style,
+    )

reflex/.templates/apps/base/code/pages/home.py

@@ -0,0 +1,28 @@
+"""The home page of the app."""
+import reflex as rx
+
+from ..styles import *
+
+
+def home_page() -> rx.Component:
+    """The UI for the home page.
+
+    Returns:
+        rx.Component: The UI for the home page.
+    """
+    return rx.box(
+        rx.vstack(
+            rx.heading(
+                "Home",
+                size="3em",
+            ),
+            rx.text(
+                "Welcome to Reflex!",
+            ),
+            rx.text(
+                "You can use this template to get started with Reflex.",
+            ),
+            style=template_content_style,
+        ),
+        style=template_page_style,
+    )

reflex/.templates/apps/base/code/pages/settings.py

@@ -0,0 +1,28 @@
+"""The settings page for the template."""
+import reflex as rx
+
+from ..styles import *
+
+
+def settings_page() -> rx.Component:
+    """The UI for the settings page.
+
+    Returns:
+        rx.Component: The UI for the settings page.
+    """
+    return rx.box(
+        rx.vstack(
+            rx.heading(
+                "Settings",
+                size="3em",
+            ),
+            rx.text(
+                "Welcome to Reflex!",
+            ),
+            rx.text(
+                "You can use this template to get started with Reflex.",
+            ),
+            style=template_content_style,
+        ),
+        style=template_page_style,
+    )