2023-06-18 19:40:23 +08:00
|
|
|
use leptos::*;
|
|
|
|
use leptos_router::use_navigate;
|
|
|
|
use melt_ui::*;
|
|
|
|
|
|
|
|
#[component]
|
2023-08-29 09:11:22 +08:00
|
|
|
pub fn SiteHeader() -> impl IntoView {
|
2023-10-24 21:49:36 +08:00
|
|
|
let theme = use_rw_theme();
|
2023-10-26 23:24:16 +08:00
|
|
|
let theme_name = create_memo(move |_| {
|
|
|
|
theme.with(|theme| {
|
|
|
|
if theme.name == "light".to_string() {
|
|
|
|
"Dark"
|
|
|
|
} else {
|
|
|
|
"Light"
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
2023-10-24 21:49:36 +08:00
|
|
|
let on_theme = move |_| {
|
2023-10-26 23:24:16 +08:00
|
|
|
if theme_name.get_untracked() == "Light" {
|
2023-10-24 21:49:36 +08:00
|
|
|
theme.set(Theme::light())
|
|
|
|
} else {
|
|
|
|
theme.set(Theme::dark())
|
|
|
|
}
|
|
|
|
};
|
2023-10-26 16:53:51 +08:00
|
|
|
let style = create_memo(move |_| {
|
|
|
|
theme.with(|theme| {
|
|
|
|
format!("height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid {}", theme.common.border_color)
|
|
|
|
})
|
|
|
|
});
|
2023-08-29 09:11:22 +08:00
|
|
|
view! {
|
2023-10-26 16:53:51 +08:00
|
|
|
<LayoutHeader style>
|
2023-10-08 09:28:13 +08:00
|
|
|
<span
|
|
|
|
style="cursor: pointer"
|
|
|
|
on:click=move |_| {
|
|
|
|
let navigate = use_navigate();
|
|
|
|
navigate("/", Default::default());
|
|
|
|
}
|
|
|
|
>
|
|
|
|
|
2023-06-18 19:40:23 +08:00
|
|
|
"Melt UI"
|
|
|
|
</span>
|
2023-10-24 21:49:36 +08:00
|
|
|
<Space>
|
|
|
|
<Button
|
|
|
|
variant=ButtonVariant::Text
|
|
|
|
on:click=on_theme
|
|
|
|
>
|
|
|
|
{move || theme_name.get()}
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
variant=ButtonVariant::Text
|
|
|
|
on:click=move |_| {
|
|
|
|
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
|
|
|
|
}
|
|
|
|
>
|
|
|
|
|
|
|
|
"Github"
|
|
|
|
</Button>
|
|
|
|
</Space>
|
2023-10-08 09:28:13 +08:00
|
|
|
|
2023-06-18 19:40:23 +08:00
|
|
|
</LayoutHeader>
|
|
|
|
}
|
|
|
|
}
|