src/components/Navigation.jsx

@@ -1,5 +1,5 @@
 import { NavLink } from "react-router-dom"
-import { Home, BarChart3, Wallet, Settings } from "lucide-react"
+import { Home, BarChart3, Wallet, PiggyBank, Settings } from "lucide-react"
 import clsx from "clsx"
 
 export default function Navigation() {
@@ -7,6 +7,7 @@ export default function Navigation() {
     { to: "/", icon: Home, label: "Главная" },
     { to: "/tracker", icon: BarChart3, label: "Трекер" },
     { to: "/finance", icon: Wallet, label: "Финансы" },
+    { to: "/savings", icon: PiggyBank, label: "Накопления" },
     { to: "/settings", icon: Settings, label: "Настройки" },
   ]
 
@@ -21,15 +22,15 @@ export default function Navigation() {
               end={to === "/"}
               className={({ isActive }) =>
                 clsx(
-                  "flex flex-col items-center gap-0.5 px-3 py-2 rounded-xl transition-all",
+                  "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={22} />
+              <Icon size={20} />
-              <span className="text-[11px] font-medium">{label}</span>
+              <span className="text-[10px] font-medium">{label}</span>
             </NavLink>
           ))}
         </div>