| 1 | import { Link, useLocation } from "react-router-dom"; |
| 2 | import * as Tooltip from "@radix-ui/react-tooltip"; |
| 3 | import haptics from "./../utils/haptics"; |
| 4 | import { useLang } from "../context/LanguageContext"; |
| 5 | |
| 6 | interface NavItem { |
| 7 | path: string; |
| 8 | key: "home" | "cut" | "profile"; |
| 9 | icon: React.JSX.Element; |
| 10 | } |
| 11 | |
| 12 | const navItems: NavItem[] = [ |
| 13 | { |
| 14 | path: "/", |
| 15 | key: "home", |
| 16 | icon: ( |
| 17 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24"> |
| 18 | <path |
| 19 | d="M3 10.5L12 4l9 6.5V20a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-4h-4v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V10.5z" |
| 20 | stroke="#0088E0" |
| 21 | strokeWidth="1.5" |
| 22 | strokeLinejoin="round" |
| 23 | /> |
| 24 | </svg> |
| 25 | ), |
| 26 | }, |
| 27 | { |
| 28 | path: "/cut", |
| 29 | key: "cut", |
| 30 | icon: ( |
| 31 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24"> |
| 32 | <path |
| 33 | d="M4 19V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v13M9 6v13" |
| 34 | stroke="#0088E0" |
| 35 | strokeWidth="1.5" |
| 36 | strokeLinejoin="round" |
| 37 | /> |
| 38 | </svg> |
| 39 | ), |
| 40 | }, |
| 41 | { |
| 42 | path: "/profile", |
| 43 | key: "profile", |
| 44 | icon: ( |
| 45 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24"> |
| 46 | <circle cx="12" cy="8" r="4" stroke="#0088E0" strokeWidth="1.5" /> |
| 47 | <path |
| 48 | d="M4 20v-1a7 7 0 0 1 14 0v1" |
| 49 | stroke="#0088E0" |
| 50 | strokeWidth="1.5" |
| 51 | /> |
| 52 | </svg> |
| 53 | ), |
| 54 | }, |
| 55 | ]; |
| 56 | |
| 57 | export default function Navbar() { |
| 58 | const location = useLocation(); |
| 59 | const { t, lang } = useLang(); |
| 60 | const isRTL = lang === "fa"; |
| 61 | |
| 62 | const handleNavClick = async () => { |
| 63 | await haptics.navigation(); |
| 64 | }; |
| 65 | |
| 66 | return ( |
| 67 | <> |
| 68 | {/* Top bar with app name and language switcher, matching bottom bar width */} |
| 69 | <div |
| 70 | className={`fixed top-0 left-0 w-full bg-white/70 backdrop-blur-lg z-50 shadow top-nav-safe`} |
| 71 | dir={isRTL ? "rtl" : "ltr"} |
| 72 | > |
| 73 | <div className="max-w-2xl mx-auto flex flex-row justify-between items-center px-4 py-3 w-full"> |
| 74 | <span className="font-bold text-xl text-cut-blue">{t.appName}</span> |
| 75 | </div> |
| 76 | </div> |
| 77 | |
| 78 | {/* Bottom tab navigation */} |
| 79 | <nav className="fixed bottom-0 left-0 w-full bg-white/90 backdrop-blur-md border-t z-40 shadow-lg bottom-nav-safe"> |
| 80 | <div className="max-w-2xl mx-auto flex justify-around items-center px-4 py-2 w-full"> |
| 81 | {navItems.map((item) => ( |
| 82 | <Tooltip.Root key={item.path} delayDuration={100}> |
| 83 | <Tooltip.Trigger asChild> |
| 84 | <Link |
| 85 | to={item.path} |
| 86 | onClick={handleNavClick} |
| 87 | className={`flex flex-col items-center justify-center gap-1 px-3 py-1 rounded transition-all duration-200 |
| 88 | ${ |
| 89 | location.pathname === item.path |
| 90 | ? "bg-cut-red-100 text-cut-blue-900 shadow font-semibold" |
| 91 | : "hover:bg-cut-red-50 text-slate-800" |
| 92 | }`} |
| 93 | style={{ minWidth: 60 }} |
| 94 | > |
| 95 | {item.icon} |
| 96 | <span className="text-xs">{t[item.key]}</span> |
| 97 | </Link> |
| 98 | </Tooltip.Trigger> |
| 99 | <Tooltip.Portal> |
| 100 | <Tooltip.Content className="text-xs bg-white border px-2 py-1 rounded shadow"> |
| 101 | {t[item.key]} |
| 102 | <Tooltip.Arrow className="fill-white" /> |
| 103 | </Tooltip.Content> |
| 104 | </Tooltip.Portal> |
| 105 | </Tooltip.Root> |
| 106 | ))} |
| 107 | </div> |
| 108 | </nav> |
| 109 | {/* Add top and bottom padding to main content to prevent overlap */} |
| 110 | <div className="h-16" aria-hidden="true"></div> |
| 111 | </> |
| 112 | ); |
| 113 | } |