File size: 4,622 Bytes
7eefd64 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
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"),
# sidebar_item("Messages", "mail", "/#"),
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",
# position="fixed",
# left="0px",
# top="0px",
# z_index="5",
padding_x="1em",
padding_y="1.5em",
bg=rx.color("accent", 3),
align="start",
# height="100%",
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",
),
)
|