83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Dumbbell, History as HistoryIcon, BarChart2, MessageSquare, ClipboardList, User } from 'lucide-react';
|
|
import { TabView, Language } from '../types';
|
|
import { t } from '../services/i18n';
|
|
|
|
interface NavbarProps {
|
|
currentTab: TabView;
|
|
onTabChange: (tab: TabView) => void;
|
|
lang: Language;
|
|
}
|
|
|
|
const Navbar: React.FC<NavbarProps> = ({ currentTab, onTabChange, lang }) => {
|
|
const navItems = [
|
|
{ id: 'TRACK' as TabView, icon: Dumbbell, label: t('tab_tracker', lang) },
|
|
{ id: 'PLANS' as TabView, icon: ClipboardList, label: t('tab_plans', lang) },
|
|
{ id: 'HISTORY' as TabView, icon: HistoryIcon, label: t('tab_history', lang) },
|
|
{ id: 'STATS' as TabView, icon: BarChart2, label: t('tab_stats', lang) },
|
|
{ id: 'AI_COACH' as TabView, icon: MessageSquare, label: t('tab_ai', lang) },
|
|
{ id: 'PROFILE' as TabView, icon: User, label: t('tab_profile', lang) },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* MOBILE: Bottom Navigation Bar (MD3) */}
|
|
<div 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 = currentTab === item.id;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onTabChange(item.id)}
|
|
className="flex flex-col items-center justify-center w-full h-full gap-1 group min-w-0"
|
|
>
|
|
<div className={`px-4 py-1 rounded-full 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={22} strokeWidth={isActive ? 2.5 : 2} />
|
|
</div>
|
|
<span className={`text-[10px] 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 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 = currentTab === item.id;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onTabChange(item.id)}
|
|
className="flex flex-col items-center gap-1 group w-full"
|
|
>
|
|
<div className={`w-14 h-8 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} />
|
|
</div>
|
|
<span className={`text-[11px] font-medium text-center ${
|
|
isActive ? 'text-on-surface' : 'text-on-surface-variant'
|
|
}`}>
|
|
{item.label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|