Update sidebar tutorial for new substates (#2256)

reflex/.templates/apps/sidebar/README.md

@@ -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.

reflex/.templates/apps/sidebar/code/components/sidebar.py

@@ -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()}") | (
+    active = (rx.State.router.page.path == f"/{text.lower()}") | (
-        (State.router.page.path == "/") & text == "Home"
+        (rx.State.router.page.path == "/") & text == "Home"
     )
 
     return rx.link(

reflex/.templates/apps/sidebar/code/state.py

@@ -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