Fix help support icon color

Fixes an issue where the settings icon was not correctly colored when navigating to the help and support page.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 23:33:58 +00:00
parent 59acb72cf3
commit 4b46a9ea35

View File

@@ -8,31 +8,42 @@ const NavBar = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
// 설정 관련 경로 목록 추가
const settingsRelatedPaths = [
'/settings',
'/profile',
'/security-privacy',
'/help-support',
'/payment-methods',
'/notifications'
];
const isSettingsActive = settingsRelatedPaths.some(path => location.pathname === path);
const navItems = [ const navItems = [
{ icon: Home, label: '홈', path: '/' }, { icon: Home, label: '홈', path: '/', isActive: location.pathname === '/' },
{ icon: Calendar, label: '지출', path: '/transactions' }, { icon: Calendar, label: '지출', path: '/transactions', isActive: location.pathname === '/transactions' },
{ icon: BarChart2, label: '분석', path: '/analytics' }, { icon: BarChart2, label: '분석', path: '/analytics', isActive: location.pathname === '/analytics' },
{ icon: Settings, label: '설정', path: '/settings' }, { icon: Settings, label: '설정', path: '/settings', isActive: isSettingsActive },
]; ];
return ( return (
<div className="fixed bottom-0 left-0 right-0 p-4 z-10 animate-slide-up"> <div className="fixed bottom-0 left-0 right-0 p-4 z-10 animate-slide-up">
<div className="neuro-flat mx-auto max-w-md flex justify-around items-center py-3 px-6"> <div className="neuro-flat mx-auto max-w-md flex justify-around items-center py-3 px-6">
{navItems.map((item) => { {navItems.map((item) => {
const isActive = location.pathname === item.path;
return ( return (
<button <button
key={item.path} key={item.path}
onClick={() => navigate(item.path)} onClick={() => navigate(item.path)}
className={cn( className={cn(
"flex flex-col items-center gap-1 p-2 rounded-lg transition-all duration-300", "flex flex-col items-center gap-1 p-2 rounded-lg transition-all duration-300",
isActive ? "text-neuro-income" : "text-gray-500" item.isActive ? "text-neuro-income" : "text-gray-500"
)} )}
> >
<div <div
className={cn( className={cn(
"p-2 rounded-full transition-all duration-300", "p-2 rounded-full transition-all duration-300",
isActive ? "neuro-pressed" : "neuro-flat" item.isActive ? "neuro-pressed" : "neuro-flat"
)} )}
> >
<item.icon size={20} /> <item.icon size={20} />