135 lines
3.2 KiB
Python
135 lines
3.2 KiB
Python
|
"""Sidebar component for the app."""
|
||
|
|
|
||
|
|
from blurme import styles
|
||
|
|
from blurme.state import State
|
||
|
|
|
||
|
|
import reflex as rx
|
||
|
|
|
||
|
|
|
||
|
|
def sidebar_header() -> rx.Component:
|
||
|
|
"""Sidebar header.
|
||
|
|
|
||
|
|
Returns:
|
||
|
|
The sidebar header component.
|
||
|
|
"""
|
||
|
|
return rx.hstack(
|
||
|
|
# The logo.
|
||
|
|
rx.image(
|
||
|
|
src="/icon.png",
|
||
|
|
height="4.5em",
|
||
|
|
),
|
||
|
|
rx.spacer(),
|
||
|
|
# Link to Reflex GitHub repo.
|
||
|
|
width="100%",
|
||
|
|
border_bottom=styles.border,
|
||
|
|
padding="1em",
|
||
|
|
)
|
||
|
|
|
||
|
|
|
||
|
|
#def sidebar_footer() -> rx.Component:
|
||
|
|
"""Sidebar footer.
|
||
|
|
|
||
|
|
Returns:
|
||
|
|
The sidebar footer component.
|
||
|
|
"""
|
||
|
|
# return rx.hstack(
|
||
|
|
# rx.spacer(),
|
||
|
|
# rx.link(
|
||
|
|
# rx.text("Docs"),
|
||
|
|
# href="https://reflex.dev/docs/getting-started/introduction/",
|
||
|
|
# ),
|
||
|
|
# rx.link(
|
||
|
|
# rx.text("Blog"),
|
||
|
|
# href="https://reflex.dev/blog/",
|
||
|
|
# ),
|
||
|
|
# width="100%",
|
||
|
|
# border_top=styles.border,
|
||
|
|
# padding="1em",
|
||
|
|
# )
|
||
|
|
|
||
|
|
def sidebar_item(text: str, url: str) -> rx.Component:
|
||
|
|
#icon: str,
|
||
|
|
"""Sidebar item.
|
||
|
|
|
||
|
|
Args:
|
||
|
|
text: The text of the item.
|
||
|
|
icon: The icon of the item.
|
||
|
|
url: The URL of the item.
|
||
|
|
|
||
|
|
Returns:
|
||
|
|
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"
|
||
|
|
)
|
||
|
|
|
||
|
|
return rx.link(
|
||
|
|
rx.hstack(
|
||
|
|
#rx.image(
|
||
|
|
# src=icon,
|
||
|
|
# height="2.5em",
|
||
|
|
# padding="0.5em",
|
||
|
|
#),
|
||
|
|
rx.text(
|
||
|
|
text,
|
||
|
|
),
|
||
|
|
bg=rx.cond(
|
||
|
|
active,
|
||
|
|
styles.accent_color,
|
||
|
|
"transparent",
|
||
|
|
),
|
||
|
|
color=rx.cond(
|
||
|
|
active,
|
||
|
|
styles.accent_text_color,
|
||
|
|
styles.text_color,
|
||
|
|
),
|
||
|
|
border_radius=styles.border_radius,
|
||
|
|
box_shadow=styles.box_shadow,
|
||
|
|
width="100%",
|
||
|
|
padding_x="1em",
|
||
|
|
height = "2em"
|
||
|
|
),
|
||
|
|
href=url,
|
||
|
|
width="100%",
|
||
|
|
)
|
||
|
|
|
||
|
|
|
||
|
|
def sidebar() -> rx.Component:
|
||
|
|
"""The sidebar.
|
||
|
|
|
||
|
|
Returns:
|
||
|
|
The sidebar component.
|
||
|
|
"""
|
||
|
|
# Get all the decorated pages and add them to the sidebar.
|
||
|
|
from reflex.page import get_decorated_pages
|
||
|
|
|
||
|
|
return rx.box(
|
||
|
|
rx.vstack(
|
||
|
|
sidebar_header(),
|
||
|
|
rx.vstack(
|
||
|
|
*[
|
||
|
|
sidebar_item(
|
||
|
|
text=page.get("title", page["route"].strip("/").capitalize()),
|
||
|
|
#icon=page.get("image", "/github.svg"),
|
||
|
|
url=page["route"],
|
||
|
|
)
|
||
|
|
for page in get_decorated_pages()
|
||
|
|
],
|
||
|
|
width="100%",
|
||
|
|
overflow_y="auto",
|
||
|
|
align_items="flex-start",
|
||
|
|
padding="1em",
|
||
|
|
),
|
||
|
|
rx.spacer(),
|
||
|
|
#sidebar_footer(),
|
||
|
|
height="100dvh",
|
||
|
|
),
|
||
|
|
display=["none", "none", "block"],
|
||
|
|
min_width=styles.sidebar_width,
|
||
|
|
height="100%",
|
||
|
|
position="sticky",
|
||
|
|
top="0px",
|
||
|
|
border_right=styles.border,
|
||
|
|
)
|