jesus/Rustelo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix lang selector

Browse Source
This commit is contained in:
Jesús Pérex 2025-07-11 21:20:26 +01:00
parent 2f0f807331
commit afae617013
Signed by: jesus
GPG Key ID: 9F243E355E0BC939
3 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app.rs
View File

@ -11,7 +11,7 @@ use crate::components::NavMenu;
use crate::i18n::{I18nProvider, ThemeProvider}; use crate::i18n::{I18nProvider, ThemeProvider};
use crate::pages::{AboutPage, DaisyUIPage, FeaturesDemoPage, HomePage, UserPage}; use crate::pages::{AboutPage, DaisyUIPage, FeaturesDemoPage, HomePage, UserPage};
use crate::state::*; use crate::state::*;
use crate::utils::{get_initial_path, make_popstate_effect}; use crate::utils::make_popstate_effect;
use leptos::children::Children; use leptos::children::Children;
use leptos::prelude::*; use leptos::prelude::*;
use leptos_meta::{MetaTags, Title, provide_meta_context}; use leptos_meta::{MetaTags, Title, provide_meta_context};
@ -33,7 +33,7 @@ fn NotFoundPage() -> impl IntoView {
/// Main app component with SSR path awareness and SPA routing. /// Main app component with SSR path awareness and SPA routing.
#[component] #[component]
pub fn App(#[prop(default = String::new())] initial_path: String) -> impl IntoView { pub fn App(#[prop(default = String::new())] _initial_path: String) -> impl IntoView {
provide_meta_context(); provide_meta_context();
// Always start with HOME during SSR, then route to correct page on client // Always start with HOME during SSR, then route to correct page on client
@ -181,7 +181,7 @@ pub fn shell_with_path(options: LeptosOptions, path: Option<String>) -> impl Int
<MetaTags/> <MetaTags/>
</head> </head>
<body> <body>
<App initial_path=path.unwrap_or_default() /> <App _initial_path=path.unwrap_or_default() />
</body> </body>
</html> </html>
} }

46
client/src/components/navmenu.rs
View File

@ -29,12 +29,9 @@ pub fn NavMenu(set_path: WriteSignal<String>) -> impl IntoView {
let on_link_click = on_link_click.clone(); let on_link_click = on_link_click.clone();
let route = item.route.clone(); let route = item.route.clone();
let route_for_click = route.clone(); let route_for_click = route.clone();
let lang_val = i18n.lang_code(); let i18n_clone = i18n.clone();
let is_external = item.is_external; let is_external = item.is_external;
let label = match lang_val.as_str() { let item_clone = item.clone();
"es" => item.label.es.clone(),
_ => item.label.en.clone(),
};
if is_external { if is_external {
view! { view! {
<li> <li>
@ -43,7 +40,13 @@ pub fn NavMenu(set_path: WriteSignal<String>) -> impl IntoView {
class="no-underline font-sans antialiased text-sm text-current dark:text-gray-200 flex items-center gap-x-2 p-1 mt-2 hover:text-primary dark:hover:text-blue-400" class="no-underline font-sans antialiased text-sm text-current dark:text-gray-200 flex items-center gap-x-2 p-1 mt-2 hover:text-primary dark:hover:text-blue-400"
> >
<svg width="1.5em" height="1.5em" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4"><path d="M7 18H10.5H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 14H7.5H8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 10H8.5H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 2L16.5 2L21 6.5V19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 20.5V6.5C3 5.67157 3.67157 5 4.5 5H14.2515C14.4106 5 14.5632 5.06321 14.6757 5.17574L17.8243 8.32426C17.9368 8.43679 18 8.5894 18 8.74853V20.5C18 21.3284 17.3284 22 16.5 22H4.5C3.67157 22 3 21.3284 3 20.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14 5V8.4C14 8.73137 14.2686 9 14.6 9H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg> <svg width="1.5em" height="1.5em" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4"><path d="M7 18H10.5H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 14H7.5H8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 10H8.5H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 2L16.5 2L21 6.5V19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 20.5V6.5C3 5.67157 3.67157 5 4.5 5H14.2515C14.4106 5 14.5632 5.06321 14.6757 5.17574L17.8243 8.32426C17.9368 8.43679 18 8.5894 18 8.74853V20.5C18 21.3284 17.3284 22 16.5 22H4.5C3.67157 22 3 21.3284 3 20.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14 5V8.4C14 8.73137 14.2686 9 14.6 9H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
{label} {move || {
let lang_val = i18n_clone.lang_code();
match lang_val.as_str() {
"es" => item_clone.label.es.clone(),
_ => item_clone.label.en.clone(),
}
}}
</a> </a>
</li> </li>
}.into_any() }.into_any()
@ -55,7 +58,13 @@ pub fn NavMenu(set_path: WriteSignal<String>) -> impl IntoView {
on:click=move |ev| on_link_click(ev, &route_for_click) on:click=move |ev| on_link_click(ev, &route_for_click)
class="no-underline font-sans antialiased text-sm text-current dark:text-gray-200 flex items-center gap-x-2 p-1 mt-2 hover:text-primary dark:hover:text-blue-400" class="no-underline font-sans antialiased text-sm text-current dark:text-gray-200 flex items-center gap-x-2 p-1 mt-2 hover:text-primary dark:hover:text-blue-400"
> >
{label} {move || {
let lang_val = i18n_clone.lang_code();
match lang_val.as_str() {
"es" => item_clone.label.es.clone(),
_ => item_clone.label.en.clone(),
}
}}
</a> </a>
</li> </li>
}.into_any() }.into_any()
@ -107,12 +116,9 @@ pub fn NavMenu(set_path: WriteSignal<String>) -> impl IntoView {
let on_link_click = on_link_click.clone(); let on_link_click = on_link_click.clone();
let route = item.route.clone(); let route = item.route.clone();
let route_for_click = route.clone(); let route_for_click = route.clone();
let lang_val = i18n.lang_code(); let i18n_mobile = i18n.clone();
let is_external = item.is_external; let is_external = item.is_external;
let label = match lang_val.as_str() { let item_mobile = item.clone();
"es" => item.label.es.clone(),
_ => item.label.en.clone(),
};
let click_item = move |ev| { let click_item = move |ev| {
on_link_click(ev, Box::leak(route_for_click.clone().into_boxed_str())); on_link_click(ev, Box::leak(route_for_click.clone().into_boxed_str()));
set_mobile_menu_open.set(false); set_mobile_menu_open.set(false);
@ -132,7 +138,13 @@ pub fn NavMenu(set_path: WriteSignal<String>) -> impl IntoView {
<path d="M3 20.5V6.5C3 5.67157 3.67157 5 4.5 5H14.2515C14.4106 5 14.5632 5.06321 14.6757 5.17574L17.8243 8.32426C17.9368 8.43679 18 8.5894 18 8.74853V20.5C18 21.3284 17.3284 22 16.5 22H4.5C3.67157 22 3 21.3284 3 20.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M3 20.5V6.5C3 5.67157 3.67157 5 4.5 5H14.2515C14.4106 5 14.5632 5.06321 14.6757 5.17574L17.8243 8.32426C17.9368 8.43679 18 8.5894 18 8.74853V20.5C18 21.3284 17.3284 22 16.5 22H4.5C3.67157 22 3 21.3284 3 20.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14 5V8.4C14 8.73137 14.2686 9 14.6 9H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 5V8.4C14 8.73137 14.2686 9 14.6 9H18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> </svg>
{label} {move || {
let lang_val = i18n_mobile.lang_code();
match lang_val.as_str() {
"es" => item_mobile.label.es.clone(),
_ => item_mobile.label.en.clone(),
}
}}
</a> </a>
</li> </li>
}.into_any() }.into_any()
@ -144,7 +156,13 @@ pub fn NavMenu(set_path: WriteSignal<String>) -> impl IntoView {
on:click=click_item on:click=click_item
class="text-gray-500 dark:text-gray-400 font-sans antialiased text-sm text-current dark:text-gray-200 flex items-center gap-x-2 p-1 hover:text-primary dark:hover:text-blue-400" class="text-gray-500 dark:text-gray-400 font-sans antialiased text-sm text-current dark:text-gray-200 flex items-center gap-x-2 p-1 hover:text-primary dark:hover:text-blue-400"
> >
{label} {move || {
let lang_val = i18n_mobile.lang_code();
match lang_val.as_str() {
"es" => item_mobile.label.es.clone(),
_ => item_mobile.label.en.clone(),
}
}}
</a> </a>
</li> </li>
}.into_any() }.into_any()

10
client/src/i18n/mod.rs
View File

@ -187,7 +187,7 @@ pub fn LanguageSelector(#[prop(optional)] class: Option<String>) -> impl IntoVie
type="button" type="button"
class="inline-flex items-center justify-center px-2 py-1 text-sm font-medium bg-white dark:bg-gray-800 text-stone-800 dark:text-gray-200 border border-stone-200 dark:border-gray-600 rounded-lg hover:bg-stone-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200" class="inline-flex items-center justify-center px-2 py-1 text-sm font-medium bg-white dark:bg-gray-800 text-stone-800 dark:text-gray-200 border border-stone-200 dark:border-gray-600 rounded-lg hover:bg-stone-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200"
on:click=move |_| set_is_open.update(|open| *open = !*open) on:click=move |_| set_is_open.update(|open| *open = !*open)
aria-expanded=move || is_open.get_untracked() aria-expanded=move || is_open.get()
aria-haspopup="true" aria-haspopup="true"
> >
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -202,7 +202,7 @@ pub fn LanguageSelector(#[prop(optional)] class: Option<String>) -> impl IntoVie
</svg> </svg>
</button> </button>
<Show when=move || is_open.get_untracked()> <Show when=move || is_open.get()>
<div class="absolute right-0 top-full z-[9999] w-40 mt-1 origin-top-right bg-white dark:bg-gray-800 border border-stone-200 dark:border-gray-600 rounded-lg shadow-xl ring-1 ring-stone-950 dark:ring-gray-700 ring-opacity-5 focus:outline-none"> <div class="absolute right-0 top-full z-[9999] w-40 mt-1 origin-top-right bg-white dark:bg-gray-800 border border-stone-200 dark:border-gray-600 rounded-lg shadow-xl ring-1 ring-stone-950 dark:ring-gray-700 ring-opacity-5 focus:outline-none">
<div class="py-1" role="menu" aria-orientation="vertical"> <div class="py-1" role="menu" aria-orientation="vertical">
{ {
@ -251,7 +251,7 @@ pub fn LanguageSelector(#[prop(optional)] class: Option<String>) -> impl IntoVie
</Show> </Show>
// Click outside to close // Click outside to close
<Show when=move || is_open.get_untracked()> <Show when=move || is_open.get()>
<div <div
class="fixed inset-0 z-40" class="fixed inset-0 z-40"
on:click=move |_| set_is_open.set(false) on:click=move |_| set_is_open.set(false)
@ -276,7 +276,7 @@ pub fn LanguageToggle(#[prop(optional)] class: Option<String>) -> impl IntoView
on:click={ on:click={
let i18n_clone = i18n.clone(); let i18n_clone = i18n.clone();
move |_| { move |_| {
let current = i18n_clone.0.language.get_untracked(); let current = i18n_clone.0.language.get();
let new_lang = match current { let new_lang = match current {
Language::English => Language::Spanish, Language::English => Language::Spanish,
Language::Spanish => Language::English, Language::Spanish => Language::English,
@ -294,7 +294,7 @@ pub fn LanguageToggle(#[prop(optional)] class: Option<String>) -> impl IntoView
</svg> </svg>
{ {
let i18n_clone = i18n.clone(); let i18n_clone = i18n.clone();
move || i18n_clone.0.language.get_untracked().code().to_uppercase() move || i18n_clone.0.language.get().code().to_uppercase()
} }
</button> </button>
} }