BlurMe/blurme/components/sidebar.py

121 lines
2.9 KiB
Python

"""Sidebar component for the app."""
from blurme import styles
from blurme.state import State
from reflex.page import get_decorated_pages
from blurme.templates import template
import reflex as rx
def sidebar_header() -> rx.Component:
"""Returns:
The sidebar header component.
"""
return rx.hstack(
# The logo.
rx.image(
src="/icon.png",
height="4.5em",
),
rx.spacer(),
width="100%",
border_bottom=styles.border,
padding="1em",
align = 'center',
)
def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
"""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 == url
default_dark_icon = "/image-icon-dark.png"
#final_dark_icon = dark_icon if dark_icon else default_dark_icon
#active = (State.router.page.path == f"/{text.lower()}") | (
# (State.router.page.path == "/") & text == "Strona główna"
#)
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="1.3em",
height = "2.5em"
),
href=url,
width="100%",
)
def sidebar() -> rx.Component:
"""The sidebar.
Returns:
The sidebar component.
"""
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",page["route"].strip("/").capitalize()),
url=page["route"],
)
for page in get_decorated_pages()
],
rx.spacer(),
width="100%",
overflow_y="auto",
align_items="flex-start",
padding="1em",
),
rx.spacer(),
height="100em",
),
display=["none", "none", "block"],
min_width=styles.sidebar_width,
height="100%",
position="sticky",
top="0px",
border_right=styles.border,
)