BlurMe/blurme/components/sidebar.py

"""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,
    )