90 lines
3.8 KiB
TypeScript
90 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { Dumbbell, History as HistoryIcon, BarChart2, MessageSquare, ClipboardList, User } from 'lucide-react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { t } from '../services/i18n';
|
|
import { Language } from '../types';
|
|
|
|
interface NavbarProps {
|
|
lang: Language;
|
|
}
|
|
|
|
const Navbar: React.FC<NavbarProps> = ({ lang }) => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const navItems = [
|
|
{ path: '/', icon: Dumbbell, label: t('tab_tracker', lang) },
|
|
{ path: '/plans', icon: ClipboardList, label: t('tab_plans', lang) },
|
|
{ path: '/history', icon: HistoryIcon, label: t('tab_history', lang) },
|
|
{ path: '/stats', icon: BarChart2, label: t('tab_stats', lang) },
|
|
{ path: '/coach', icon: MessageSquare, label: t('tab_ai', lang) },
|
|
{ path: '/profile', icon: User, label: t('tab_profile', lang) },
|
|
];
|
|
|
|
const currentPath = location.pathname;
|
|
|
|
return (
|
|
<>
|
|
{/* MOBILE: Bottom Navigation Bar (MD3) */}
|
|
<div role="navigation" aria-label="Bottom Navigation" className="md:hidden fixed bottom-0 left-0 w-full bg-surface-container shadow-elevation-2 border-t border-white/5 pb-safe z-50 h-20">
|
|
<div className="flex justify-evenly items-center h-full px-1">
|
|
{navItems.map((item) => {
|
|
const isActive = currentPath === item.path || (item.path !== '/' && currentPath.startsWith(item.path));
|
|
return (
|
|
<button
|
|
key={item.path}
|
|
onClick={() => navigate(item.path)}
|
|
className="flex flex-col items-center justify-center w-full h-full gap-1 group min-w-0"
|
|
>
|
|
<div className={`w-[64px] h-[32px] rounded-full flex items-center justify-center transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
|
|
}`}>
|
|
<item.icon
|
|
size={24}
|
|
strokeWidth={isActive ? 2.5 : 2}
|
|
fill="none"
|
|
/>
|
|
</div>
|
|
<span className={`text-label-md font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
|
|
}`}>
|
|
{item.label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* DESKTOP: Navigation Rail (MD3) */}
|
|
<div role="navigation" aria-label="Desktop Navigation" className="hidden md:flex flex-col w-20 h-full bg-surface-container border-r border-outline-variant items-center py-8 gap-8 z-50">
|
|
<div className="flex flex-col gap-6 w-full px-2">
|
|
{navItems.map((item) => {
|
|
const isActive = currentPath === item.path || (item.path !== '/' && currentPath.startsWith(item.path));
|
|
return (
|
|
<button
|
|
key={item.path}
|
|
onClick={() => navigate(item.path)}
|
|
className="flex flex-col items-center gap-1 group w-full"
|
|
>
|
|
<div className={`w-[56px] h-[32px] rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
|
|
}`}>
|
|
<item.icon
|
|
size={24}
|
|
strokeWidth={isActive ? 2.5 : 2}
|
|
fill="none"
|
|
/>
|
|
</div>
|
|
<span className={`text-label-md font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
|
|
}`}>
|
|
{item.label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|