BlurMe/blurme/components/sidebar.py

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