# Code coverage report for components/Navigation.jsx

# All files / components Navigation.jsx

100% Statements 8/8
100% Branches 2/2
100% Functions 4/4
100% Lines 7/7

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>
      )
    }