ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Code maintainability fixes

Browse Source
This commit is contained in:
AG
2025-12-06 11:32:40 +02:00
parent a13ef9f479
commit 4106f3b783
23 changed files with 1775 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/Navbar.tsx
View File

@@ -1,47 +1,48 @@
import React from 'react';
import { Dumbbell, History as HistoryIcon, BarChart2, MessageSquare, ClipboardList, User } from 'lucide-react';
import { TabView, Language } from '../types';
import { useLocation, useNavigate } from 'react-router-dom';
import { t } from '../services/i18n';
import { Language } from '../types';
interface NavbarProps {
currentTab: TabView;
onTabChange: (tab: TabView) => void;
lang: Language;
}
const Navbar: React.FC<NavbarProps> = ({ currentTab, onTabChange, lang }) => {
const Navbar: React.FC<NavbarProps> = ({ lang }) => {
const navigate = useNavigate();
const location = useLocation();
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) },
{ 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 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;
const isActive = currentPath === item.path || (item.path !== '/' && currentPath.startsWith(item.path));
return (
<button
key={item.id}
onClick={() => onTabChange(item.id)}
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={`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 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 className={`text-[10px] font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
}`}>
{item.label}
</span>
</button>
);
@@ -51,29 +52,27 @@ const Navbar: React.FC<NavbarProps> = ({ currentTab, onTabChange, lang }) => {
{/* 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 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-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>
</>
);