Update sidebar template (#2959)
This commit is contained in:
Alek Petuskey
GitHub
parent
0e221f0984
commit
0981ac675b
@ -18,27 +18,19 @@ def sidebar_header() -> rx.Component:
|
||||
rx.image(src="/reflex_white.svg", height="2em"),
|
||||
),
|
||||
rx.spacer(),
|
||||
# Link to Reflex GitHub repo.
|
||||
rx.link(
|
||||
rx.center(
|
||||
rx.image(
|
||||
src="/github.svg",
|
||||
height="3em",
|
||||
padding="0.5em",
|
||||
),
|
||||
box_shadow=styles.box_shadow,
|
||||
bg="transparent",
|
||||
border_radius=styles.border_radius,
|
||||
_hover={
|
||||
"bg": styles.accent_color,
|
||||
},
|
||||
rx.button(
|
||||
rx.icon("github"),
|
||||
color_scheme="gray",
|
||||
variant="soft",
|
||||
),
|
||||
href="https://github.com/reflex-dev/reflex",
|
||||
),
|
||||
align="center",
|
||||
width="100%",
|
||||
border_bottom=styles.border,
|
||||
padding="1em",
|
||||
padding_x="1em",
|
||||
padding_y="2em",
|
||||
)
|
||||
|
||||
|
||||
@ -53,12 +45,12 @@ def sidebar_footer() -> rx.Component:
|
||||
rx.link(
|
||||
rx.text("Docs"),
|
||||
href="https://reflex.dev/docs/getting-started/introduction/",
|
||||
style=styles.link_style,
|
||||
color_scheme="gray",
|
||||
),
|
||||
rx.link(
|
||||
rx.text("Blog"),
|
||||
href="https://reflex.dev/blog/",
|
||||
style=styles.link_style,
|
||||
color_scheme="gray",
|
||||
),
|
||||
width="100%",
|
||||
border_top=styles.border,
|
||||
@ -66,12 +58,11 @@ def sidebar_footer() -> rx.Component:
|
||||
)
|
||||
|
||||
|
||||
def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
|
||||
def sidebar_item(text: 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:
|
||||
@ -84,19 +75,19 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
|
||||
|
||||
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,
|
||||
rx.color("accent", 2),
|
||||
"transparent",
|
||||
),
|
||||
border=rx.cond(
|
||||
active,
|
||||
f"1px solid {rx.color('accent', 6)}",
|
||||
f"1px solid {rx.color('gray', 6)}",
|
||||
),
|
||||
color=rx.cond(
|
||||
active,
|
||||
styles.accent_text_color,
|
||||
@ -104,9 +95,8 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
|
||||
),
|
||||
align="center",
|
||||
border_radius=styles.border_radius,
|
||||
box_shadow=styles.box_shadow,
|
||||
width="100%",
|
||||
padding_x="1em",
|
||||
padding="1em",
|
||||
),
|
||||
href=url,
|
||||
width="100%",
|
||||
@ -129,7 +119,6 @@ def sidebar() -> rx.Component:
|
||||
*[
|
||||
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()
|
||||
|
||||
@ -6,7 +6,7 @@ from code.templates import template
|
||||
import reflex as rx
|
||||
|
||||
|
||||
@template(route="/", title="Home", image="/github.svg")
|
||||
@template(route="/", title="Home")
|
||||
def index() -> rx.Component:
|
||||
"""The home page.
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ def settings() -> rx.Component:
|
||||
rx.color_mode.switch(),
|
||||
),
|
||||
rx.hstack(
|
||||
rx.text("Theme color: "),
|
||||
rx.text("Primary color: "),
|
||||
rx.select(
|
||||
[
|
||||
"tomato",
|
||||
@ -53,6 +53,21 @@ def settings() -> rx.Component:
|
||||
on_change=ThemeState.set_accent_color,
|
||||
),
|
||||
),
|
||||
rx.hstack(
|
||||
rx.text("Secondary color: "),
|
||||
rx.select(
|
||||
[
|
||||
"gray",
|
||||
"mauve",
|
||||
"slate",
|
||||
"sage",
|
||||
"olive",
|
||||
"sand",
|
||||
],
|
||||
value=ThemeState.gray_color,
|
||||
on_change=ThemeState.set_gray_color,
|
||||
),
|
||||
),
|
||||
rx.text(
|
||||
"You can edit this page in ",
|
||||
rx.code("{your_app}/pages/settings.py"),
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
"""Welcome to Reflex!."""
|
||||
|
||||
from code import styles
|
||||
|
||||
# Import all the pages.
|
||||
from code.pages import *
|
||||
|
||||
@ -13,4 +11,4 @@ class State(rx.State):
|
||||
|
||||
|
||||
# Create the app.
|
||||
app = rx.App(style=styles.base_style)
|
||||
app = rx.App()
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
import reflex as rx
|
||||
|
||||
border_radius = "0.375rem"
|
||||
box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
|
||||
border = f"1px solid {rx.color('accent', 12)}"
|
||||
border = f"1px solid {rx.color('gray', 6)}"
|
||||
text_color = rx.color("gray", 11)
|
||||
accent_text_color = rx.color("accent", 10)
|
||||
accent_color = rx.color("accent", 1)
|
||||
@ -17,7 +16,6 @@ template_page_style = {"padding_top": "5em", "padding_x": ["auto", "2em"], "flex
|
||||
|
||||
template_content_style = {
|
||||
"align_items": "flex-start",
|
||||
"box_shadow": box_shadow,
|
||||
"border_radius": border_radius,
|
||||
"padding": "1em",
|
||||
"margin_bottom": "2em",
|
||||
@ -31,30 +29,17 @@ link_style = {
|
||||
|
||||
overlapping_button_style = {
|
||||
"background_color": "white",
|
||||
"border": border,
|
||||
"border_radius": border_radius,
|
||||
}
|
||||
|
||||
base_style = {
|
||||
rx.menu.trigger: {
|
||||
**overlapping_button_style,
|
||||
},
|
||||
rx.menu.item: hover_accent_bg,
|
||||
}
|
||||
|
||||
markdown_style = {
|
||||
"code": lambda text: rx.code(text, color=accent_text_color, bg=accent_color),
|
||||
"code": lambda text: rx.code(text, color_scheme="gray"),
|
||||
"codeblock": lambda text, **props: rx.code_block(text, **props, margin_y="1em"),
|
||||
"a": lambda text, **props: rx.link(
|
||||
text,
|
||||
**props,
|
||||
font_weight="bold",
|
||||
color=accent_text_color,
|
||||
text_decoration="underline",
|
||||
text_decoration_color=accent_text_color,
|
||||
_hover={
|
||||
"color": accent_color,
|
||||
"text_decoration": "underline",
|
||||
"text_decoration_color": accent_color,
|
||||
},
|
||||
),
|
||||
}
|
||||
|
||||
@ -43,12 +43,10 @@ def menu_button() -> rx.Component:
|
||||
return rx.box(
|
||||
rx.menu.root(
|
||||
rx.menu.trigger(
|
||||
rx.icon(
|
||||
"menu",
|
||||
size=36,
|
||||
color=styles.accent_text_color,
|
||||
),
|
||||
background_color=styles.accent_color,
|
||||
rx.button(
|
||||
rx.icon("menu"),
|
||||
variant="soft",
|
||||
)
|
||||
),
|
||||
rx.menu.content(
|
||||
*[
|
||||
@ -61,8 +59,8 @@ def menu_button() -> rx.Component:
|
||||
),
|
||||
),
|
||||
position="fixed",
|
||||
right="1.5em",
|
||||
top="1.5em",
|
||||
right="2em",
|
||||
top="2em",
|
||||
z_index="500",
|
||||
)
|
||||
|
||||
@ -72,11 +70,12 @@ class ThemeState(rx.State):
|
||||
|
||||
accent_color: str = "crimson"
|
||||
|
||||
gray_color: str = "gray"
|
||||
|
||||
|
||||
def template(
|
||||
route: str | None = None,
|
||||
title: str | None = None,
|
||||
image: str | None = None,
|
||||
description: str | None = None,
|
||||
meta: str | None = None,
|
||||
script_tags: list[rx.Component] | None = None,
|
||||
@ -87,7 +86,6 @@ def template(
|
||||
Args:
|
||||
route: The route to reach the page.
|
||||
title: The title of the page.
|
||||
image: The favicon of the page.
|
||||
description: The description of the page.
|
||||
meta: Additionnal meta to add to the page.
|
||||
on_load: The event handler(s) called when the page load.
|
||||
@ -121,14 +119,13 @@ def template(
|
||||
),
|
||||
menu_button(),
|
||||
align="start",
|
||||
transition="left 0.5s, width 0.5s",
|
||||
background=f"radial-gradient(circle at top right, {rx.color('accent', 2)}, {rx.color('mauve', 1)});",
|
||||
position="relative",
|
||||
)
|
||||
|
||||
@rx.page(
|
||||
route=route,
|
||||
title=title,
|
||||
image=image,
|
||||
description=description,
|
||||
meta=all_meta,
|
||||
script_tags=script_tags,
|
||||
@ -137,7 +134,9 @@ def template(
|
||||
def theme_wrap():
|
||||
return rx.theme(
|
||||
templated_page(),
|
||||
has_background=True,
|
||||
accent_color=ThemeState.accent_color,
|
||||
gray_color=ThemeState.gray_color,
|
||||
)
|
||||
|
||||
return theme_wrap
|
||||
|
||||
Loading…
Reference in New Issue
Block a user