import { NavLink } from 'react-router-dom'; import { useUserStore } from '../../stores/userStore'; const navItems = [ { to: '/', label: 'Übungen', icon: ( ), }, { to: '/sets', label: 'Sets', icon: ( ), }, { to: '/training', label: 'Training', icon: ( ), }, { to: '/history', label: 'Historie', icon: ( ), }, { to: '/settings', label: 'Einstellungen', icon: ( ), }, ]; /** Mobile Bottom-Navigation mit Links zu allen Hauptseiten. */ export function BottomNav() { return ( {navItems.map((item) => ( `flex flex-col items-center py-2 px-3 min-h-[44px] min-w-[44px] text-xs transition-colors ${ isActive ? 'text-blue-500' : 'text-gray-400 hover:text-gray-200' }` } > {item.icon} {item.label} ))} ); } /** Desktop-Seitenleiste mit Navigation und aktivem Nutzer-Indikator. */ export function Sidebar() { const { activeUser } = useUserStore(); return ( Krafttrainer {navItems.map((item) => ( `flex items-center gap-3 px-3 py-3 rounded-lg min-h-[44px] transition-colors ${ isActive ? 'bg-blue-500/20 text-blue-400' : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800' }` } > {item.icon} {item.label} ))} {activeUser && ( {activeUser.name.charAt(0).toUpperCase()} {activeUser.name} )} ); }