|
import reflex as rx |
|
|
|
|
|
def sidebar_item( |
|
text: str, icon: str, href: str |
|
) -> rx.Component: |
|
return rx.link( |
|
rx.hstack( |
|
rx.icon(icon), |
|
rx.text(text, size="4"), |
|
width="100%", |
|
padding_x="0.5rem", |
|
padding_y="0.75rem", |
|
align="center", |
|
style={ |
|
"_hover": { |
|
"bg": rx.color("accent", 4), |
|
"color": rx.color("accent", 11), |
|
}, |
|
"border-radius": "0.5em", |
|
}, |
|
), |
|
href=href, |
|
underline="none", |
|
weight="medium", |
|
width="100%", |
|
) |
|
|
|
|
|
def sidebar_items() -> rx.Component: |
|
return rx.vstack( |
|
sidebar_item("Prompt Order Experiment", "square-library", "/#"), |
|
sidebar_item("Overview", "layout-dashboard", "/overview"), |
|
sidebar_item("Results", "bar-chart-4", "/results"), |
|
|
|
spacing="1", |
|
width="100%", |
|
) |
|
|
|
|
|
def sidebar() -> rx.Component: |
|
return rx.box( |
|
rx.desktop_only( |
|
rx.vstack( |
|
rx.hstack( |
|
rx.image( |
|
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg", |
|
width="2.25em", |
|
height="auto", |
|
border_radius="25%", |
|
), |
|
rx.heading( |
|
"Prompt Order Experiment", size="7", weight="bold" |
|
), |
|
align="center", |
|
justify="start", |
|
padding_x="0.5rem", |
|
width="100%", |
|
), |
|
sidebar_items(), |
|
spacing="5", |
|
|
|
|
|
|
|
|
|
padding_x="1em", |
|
padding_y="1.5em", |
|
bg=rx.color("accent", 3), |
|
align="start", |
|
|
|
height="650px", |
|
width="16em", |
|
), |
|
), |
|
rx.mobile_and_tablet( |
|
rx.drawer.root( |
|
rx.drawer.trigger( |
|
rx.icon("align-justify", size=30) |
|
), |
|
rx.drawer.overlay(z_index="5"), |
|
rx.drawer.portal( |
|
rx.drawer.content( |
|
rx.vstack( |
|
rx.box( |
|
rx.drawer.close( |
|
rx.icon("x", size=30) |
|
), |
|
width="100%", |
|
), |
|
sidebar_items(), |
|
spacing="5", |
|
width="100%", |
|
), |
|
top="auto", |
|
right="auto", |
|
height="100%", |
|
width="20em", |
|
padding="1.5em", |
|
bg=rx.color("accent", 2), |
|
), |
|
width="100%", |
|
), |
|
direction="left", |
|
), |
|
padding="1em", |
|
), |
|
) |
|
|
