Add mobile bottom navigation and responsive layout improvements

Replace sidebar with a fixed bottom nav bar on mobile (<768px) with
icon links for Home, Species, Cultivars, Companions, Search plus
a language toggle. CSS already updated in previous commit with:
- sidebar hidden on mobile, bottom-nav shown
- tables/calendars horizontally scrollable
- filter bars stacked vertically
- detail pages single-column
- stats grid 2-column on mobile
This commit is contained in:
2026-03-17 21:28:10 +01:00
parent 7546c3a9dc
commit 9ef0f30dac
+42
View File
@@ -118,6 +118,48 @@ fn Layout() -> Element {
main { class: "content",
Outlet::<Route> {}
}
// Bottom navigation — visible only on mobile via CSS
nav { class: "bottom-nav",
Link { to: Route::Home {}, class: "bottom-nav-link",
span { class: "bottom-nav-icon", "\u{1f3e0}" }
span { class: "bottom-nav-label", "{t(l, \"nav.home\")}" }
}
Link { to: Route::SpeciesList {}, class: "bottom-nav-link",
span { class: "bottom-nav-icon", "\u{1f33f}" }
span { class: "bottom-nav-label", "{t(l, \"nav.species\")}" }
}
Link { to: Route::CultivarList {}, class: "bottom-nav-link",
span { class: "bottom-nav-icon", "\u{1f331}" }
span { class: "bottom-nav-label", "{t(l, \"nav.cultivars\")}" }
}
Link { to: Route::CompanionList {}, class: "bottom-nav-link",
span { class: "bottom-nav-icon", "\u{1f91d}" }
span { class: "bottom-nav-label", "{t(l, \"nav.companions\")}" }
}
Link { to: Route::SearchPage {}, class: "bottom-nav-link",
span { class: "bottom-nav-icon", "\u{1f50d}" }
span { class: "bottom-nav-label", "{t(l, \"nav.search\")}" }
}
div { class: "lang-toggle",
button {
class: if current_lang == "de" { "lang-btn lang-btn-active" } else { "lang-btn" },
onclick: move |_| {
lang.set("de".to_string());
let _ = LocalStorage::set("herbapi_lang", "de".to_string());
},
"DE"
}
button {
class: if current_lang == "en" { "lang-btn lang-btn-active" } else { "lang-btn" },
onclick: move |_| {
lang.set("en".to_string());
let _ = LocalStorage::set("herbapi_lang", "en".to_string());
},
"EN"
}
}
}
}
}
}