60 lines
2.6 KiB
Rust
60 lines
2.6 KiB
Rust
use dioxus::prelude::*;
|
|
use dioxus_i18n::{prelude::i18n, t, unic_langid::langid};
|
|
|
|
use crate::Route;
|
|
|
|
pub fn Header() -> Element {
|
|
rsx! {
|
|
nav {
|
|
div {
|
|
class: "container mx-auto py-4",
|
|
|
|
ul {
|
|
class:"flex flex-col justify-between items-center justify-center space-y-2 sm:flex-row sm:space-y-0 sm:space-s-4",
|
|
li {
|
|
Link {
|
|
to: Route::Home {},
|
|
class: "rounded-md shadow-sm",
|
|
img { src:asset!("./assets/pictures/ClackCat_t.webp"), class:"rounded-full h-8", alt:"TuDatTr Logo" },
|
|
},
|
|
},
|
|
li { HeaderLink { url: Route::Home {}, text: t!("headers_home")} },
|
|
li { HeaderLink { url: Route::CV {}, text: t!("headers_cv") } },
|
|
li { HeaderLink { url: Route::PublicationsProjects {}, text: t!("headers_publications_projects") } },
|
|
li { HeaderLink { url: Route::Impressum {}, text: t!("headers_about") } },
|
|
li { LanguageButtonGroup {} },
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
fn LanguageButtonGroup() -> Element {
|
|
let mut i18n = i18n();
|
|
|
|
let change_to_english = move |_| i18n.set_language(langid!("en-GB"));
|
|
let change_to_german = move |_| i18n.set_language(langid!("de-DE"));
|
|
|
|
rsx! {
|
|
div {
|
|
class: "rounded-md shadow-sm justify-end",
|
|
button {
|
|
class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white",
|
|
onclick: change_to_english,
|
|
label { { t!("headers_language_buttons_english") } } },
|
|
button {
|
|
class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white",
|
|
onclick: change_to_german,
|
|
label { { t!("headers_language_buttons_german") } } }
|
|
}
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
fn HeaderLink(url: Route, text: String) -> Element {
|
|
rsx! {
|
|
Link { to: url, class:"md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", {text} }
|
|
}
|
|
}
|