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:
@@ -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} />
|
||||||
|
|||||||
Reference in New Issue
Block a user