| 1 | import { Link, useLocation } from "react-router-dom"; |
| 2 | import * as Tooltip from "@radix-ui/react-tooltip"; |
| 3 | import { useLang } from "../context/LanguageContext"; |
| 4 | import { SupportedLanguage } from "../utils/i18n"; |
| 5 | import haptics from "./../utils/haptics"; |
| 6 | import { Home, CreditCard, User } from "lucide-react"; |
| 7 | |
| 8 | interface NavItem { |
| 9 | path: string; |
| 10 | key: "home" | "pay" | "profile"; |
| 11 | icon: React.JSX.Element; |
| 12 | } |
| 13 | |
| 14 | const navItems: NavItem[] = [ |
| 15 | { |
| 16 | path: "/", |
| 17 | key: "home", |
| 18 | icon: <Home />, |
| 19 | }, |
| 20 | { |
| 21 | path: "/pay", |
| 22 | key: "pay", |
| 23 | icon: <CreditCard />, |
| 24 | }, |
| 25 | { |
| 26 | path: "/profile", |
| 27 | key: "profile", |
| 28 | icon: <User />, |
| 29 | }, |
| 30 | ]; |
| 31 | |
| 32 | export default function Navbar() { |
| 33 | const location = useLocation(); |
| 34 | const { t, lang, setLang } = useLang(); |
| 35 | const isRTL = lang === "fa"; |
| 36 | |
| 37 | const handleNavClick = async () => { |
| 38 | await haptics.navigation(); |
| 39 | }; |
| 40 | |
| 41 | return ( |
| 42 | <> |
| 43 | {/* Top bar with app name and language switcher, matching bottom bar width */} |
| 44 | <div |
| 45 | className={`fixed top-0 left-0 w-full bg-white/70 backdrop-blur-lg z-50 shadow top-nav-safe`} |
| 46 | dir={isRTL ? "rtl" : "ltr"} |
| 47 | > |
| 48 | <div className="max-w-2xl mx-auto flex flex-row justify-between items-center px-4 py-3 w-full"> |
| 49 | <span className="font-bold text-xl text-primary">{t.appName}</span> |
| 50 | <select |
| 51 | className="rounded border px-2 py-1 bg-white text-sm text-primary cursor-pointer shadow" |
| 52 | value={lang} |
| 53 | onClick={handleNavClick} |
| 54 | onChange={(e) => setLang(e.target.value as SupportedLanguage)} |
| 55 | aria-label="Change language" |
| 56 | > |
| 57 | <option value="fa">فارسی</option> |
| 58 | <option value="en">English</option> |
| 59 | <option value="sv">Svenska</option> |
| 60 | </select> |
| 61 | </div> |
| 62 | </div> |
| 63 | |
| 64 | {/* Bottom tab navigation */} |
| 65 | <nav className="fixed bottom-0 left-0 w-full bg-white/90 backdrop-blur-md border-t z-40 shadow-lg bottom-nav-safe"> |
| 66 | <div className="max-w-2xl mx-auto flex justify-around items-center px-4 py-2 w-full"> |
| 67 | {navItems.map((item) => ( |
| 68 | <Tooltip.Root key={item.path} delayDuration={100}> |
| 69 | <Tooltip.Trigger asChild> |
| 70 | <Link |
| 71 | to={item.path} |
| 72 | onClick={handleNavClick} |
| 73 | className={`flex flex-col items-center justify-center gap-1 px-3 py-1 rounded transition-all duration-200 |
| 74 | ${ |
| 75 | location.pathname === item.path |
| 76 | ? "bg-fuchsia-100 text-primary shadow font-semibold" |
| 77 | : "hover:bg-fuchsia-50 text-slate-800" |
| 78 | }`} |
| 79 | style={{ minWidth: 60 }} |
| 80 | > |
| 81 | {item.icon} |
| 82 | <span className="text-xs">{t[item.key]}</span> |
| 83 | </Link> |
| 84 | </Tooltip.Trigger> |
| 85 | <Tooltip.Portal> |
| 86 | <Tooltip.Content className="text-xs bg-white border px-2 py-1 rounded shadow"> |
| 87 | {t[item.key]} |
| 88 | <Tooltip.Arrow className="fill-white" /> |
| 89 | </Tooltip.Content> |
| 90 | </Tooltip.Portal> |
| 91 | </Tooltip.Root> |
| 92 | ))} |
| 93 | </div> |
| 94 | </nav> |
| 95 | {/* Add top and bottom padding to main content to prevent overlap */} |
| 96 | <div className="h-16" aria-hidden="true"></div> |
| 97 | </> |
| 98 | ); |
| 99 | } |