Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 5x 5x 5x 5x 20x 20x | import { NavLink } from "react-router-dom"
import { Home, BarChart3, PiggyBank, Settings } from "lucide-react"
import { useAuthStore } from "../store/auth"
import clsx from "clsx"
const OWNER_ID = 1
export default function Navigation() {
const user = useAuthStore((s) => s.user)
const isOwner = user?.id === OWNER_ID
const navItems = [
{ to: "/", icon: Home, label: "Главная" },
{ to: "/tracker", icon: BarChart3, label: "Трекер" },
{ to: "/savings", icon: PiggyBank, label: "Накопления" },
{ to: "/settings", icon: Settings, label: "Настройки" },
].filter(Boolean)
return (
<nav className="fixed bottom-0 left-0 right-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border-t border-gray-100 dark:border-gray-800 z-50 transition-colors duration-300">
<div className="max-w-lg mx-auto px-2">
<div className="flex items-center justify-around py-2">
{navItems.map(({ to, icon: Icon, label }) => (
<NavLink
key={to}
to={to}
end={to === "/"}
className={({ isActive }) =>
clsx(
"flex flex-col items-center gap-0.5 px-2 py-2 rounded-xl transition-all",
isActive
? "text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30"
: "text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
)
}
>
<Icon size={20} />
<span className="text-[10px] font-medium">{label}</span>
</NavLink>
))}
</div>
</div>
</nav>
)
}
|