121 lines
2.9 KiB
Python
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,
|
|
)
|