Update sidebar tutorial for new substates (#2256)
This commit is contained in:
parent
0bbae2d3d5
commit
19c01492be
reflex/.templates/apps/sidebar
@ -27,7 +27,6 @@ This template has the following directory structure:
|
||||
│ ├── dashboard.py
|
||||
│ ├── index.py
|
||||
│ └── settings.py
|
||||
├── state.py
|
||||
├── styles.py
|
||||
├── templates
|
||||
│ ├── __init__.py
|
||||
@ -63,11 +62,7 @@ In this template, we have a sidebar component in `{your_app}/components/sidebar.
|
||||
|
||||
### Adding State
|
||||
|
||||
In this template, we define the base state of the app in `{your_app}/state.py`.
|
||||
The base state is useful for general app state that is used across multiple pages.
|
||||
|
||||
In this template, the base state handles the toggle for the sidebar.
|
||||
|
||||
As your app grows, we recommend using [substates](https://reflex.dev/docs/state/substates/)
|
||||
to organize your state. You can either define substates in their own files, or if the state is
|
||||
to organize your state.
|
||||
You can either define substates in their own files, or if the state is
|
||||
specific to a page, you can define it in the page file itself.
|
||||
|
@ -1,7 +1,6 @@
|
||||
"""Sidebar component for the app."""
|
||||
|
||||
from code import styles
|
||||
from code.state import State
|
||||
|
||||
import reflex as rx
|
||||
|
||||
@ -76,8 +75,8 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
|
||||
rx.Component: The sidebar item component.
|
||||
"""
|
||||
# Whether the item is active.
|
||||
active = (State.router.page.path == f"/{text.lower()}") | (
|
||||
(State.router.page.path == "/") & text == "Home"
|
||||
active = (rx.State.router.page.path == f"/{text.lower()}") | (
|
||||
(rx.State.router.page.path == "/") & text == "Home"
|
||||
)
|
||||
|
||||
return rx.link(
|
||||
|
@ -1,12 +0,0 @@
|
||||
"""Base state for the app."""
|
||||
|
||||
import reflex as rx
|
||||
|
||||
|
||||
class State(rx.State):
|
||||
"""Base state for the app.
|
||||
|
||||
The base state is used to store general vars used throughout the app.
|
||||
"""
|
||||
|
||||
pass
|
Loading…
Reference in New Issue
Block a user