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:
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user