161 lines
3.6 KiB
Markdown
161 lines
3.6 KiB
Markdown
|
|
# Sidebar
|
|
|
|
Similar to a navigation bar, a sidebar is a common UI element found on the side of a webpage or application.
|
|
|
|
## Recipe
|
|
|
|
In this recipe, we will create a sidebar component than can help with navigation in a web app.
|
|
|
|
In this example we want the sidebar to stick to the left side of the page, so we will use the `position="fixed"` prop to make the sidebar fixed to the left side of the page.
|
|
We use `left=0` and `top=0` props to specify the position of the sidebar, and the `z_index=5` props to make sure the sidebar stays above the other components on the page.
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
from pcweb.templates.docpage import demo_box_style
|
|
|
|
# Custom styles for sidebar.
|
|
box_style = demo_box_style.copy()
|
|
del box_style["padding"]
|
|
del box_style["align_items"]
|
|
del box_style["justify_content"]
|
|
box_style["height"] = "500px"
|
|
box_style["position"] = "relative"
|
|
|
|
def sidebar():
|
|
return rx.vstack(
|
|
rx.image(src="/favicon.ico",width="3em"),
|
|
rx.heading("Sidebar", margin_bottom="1em"),
|
|
position="absolute",
|
|
height="100%",
|
|
# left="0px",
|
|
# top="0px",
|
|
z_index="5",
|
|
padding_x="2em",
|
|
padding_y="1em",
|
|
background_color="lightgray",
|
|
align_items="left",
|
|
width="250px",
|
|
)
|
|
```
|
|
|
|
```python eval
|
|
rx.box(
|
|
sidebar(),
|
|
style=box_style,
|
|
)
|
|
```
|
|
|
|
```python
|
|
def sidebar():
|
|
return rx.vstack(
|
|
rx.image(src="/favicon.ico",width="3em"),
|
|
rx.heading("Sidebar", margin_bottom="1em"),
|
|
position="fixed",
|
|
height="100%",
|
|
left="0px",
|
|
top="0px",
|
|
z_index="5",
|
|
padding_x="2em",
|
|
padding_y="1em",
|
|
background_color="lightgray",
|
|
align_items="left",
|
|
width="250px",
|
|
)
|
|
```
|
|
|
|
## Adding Main Content
|
|
|
|
Now that we have a sidebar, we can add some content to the main part of the page.
|
|
|
|
We wrap both the sidebar and content in an `rx.fragment`.
|
|
We also make sure the content is aligned to the right of the sidebar by setting the `margin_left` prop to `250px` (the same as the width of the sidebar).
|
|
|
|
```python exec
|
|
|
|
def content():
|
|
return rx.box(
|
|
rx.heading("Welcome to My App"),
|
|
rx.text("This is the main content of the page."),
|
|
)
|
|
|
|
|
|
def index():
|
|
return rx.fragment(
|
|
sidebar(),
|
|
rx.container(
|
|
content(),
|
|
max_width="60em",
|
|
margin_left="250px",
|
|
padding="2em"
|
|
),
|
|
)
|
|
|
|
```
|
|
|
|
```python eval
|
|
rx.box(
|
|
index(),
|
|
style=box_style,
|
|
)
|
|
```
|
|
|
|
```python
|
|
def content():
|
|
return rx.box(
|
|
rx.heading("Welcome to My App"),
|
|
rx.text("This is the main content of the page."),
|
|
)
|
|
|
|
|
|
def index():
|
|
return rx.fragment(
|
|
sidebar(),
|
|
rx.container(
|
|
content(),
|
|
max_width="60em",
|
|
margin_left="250px",
|
|
padding="2em"
|
|
),
|
|
)
|
|
```
|
|
|
|
Here is the full code for a basic sidebar with main content:
|
|
|
|
```python
|
|
import reflex as rx
|
|
|
|
|
|
def content():
|
|
return rx.box(
|
|
rx.heading("Welcome to My App"),
|
|
rx.text("This is the main content of the page."),
|
|
)
|
|
|
|
|
|
def sidebar():
|
|
return rx.vstack(
|
|
rx.image(src="/favicon.ico", width="3em"),
|
|
rx.heading("Sidebar", margin_bottom="1em"),
|
|
position="fixed",
|
|
height="100%",
|
|
left="0px",
|
|
top="0px",
|
|
z_index="5",
|
|
padding_x="2em",
|
|
padding_y="1em",
|
|
background_color="lightgray",
|
|
align_items="left",
|
|
width="250px",
|
|
)
|
|
|
|
def index():
|
|
return rx.fragment(
|
|
sidebar(),
|
|
rx.container(content(), max_width="60em", margin_left="250px", padding="2em"),
|
|
)
|
|
|
|
app = rx.App()
|
|
app.add_page(index)
|
|
```
|