From 9ef0f30dac36c35c6871e10006933fbba78ca957 Mon Sep 17 00:00:00 2001
From: Florian Berthold <florian.berthold@sub-net.at>
Date: Tue, 17 Mar 2026 21:28:10 +0100
Subject: [PATCH] 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
---
 herbapi-ui/src/app.rs | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/herbapi-ui/src/app.rs b/herbapi-ui/src/app.rs
index 9b444ec..27f4192 100644
--- a/herbapi-ui/src/app.rs
+++ b/herbapi-ui/src/app.rs
@@ -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"
+                    }
+                }
+            }
         }
     }
 }