Tola Leng
f6592d331f
Refactored the Sidebar component into smaller, more manageable files to improve code organization and maintainability. Fix sidebar auto-expansion issue Ensured the sidebar's collapsed state is maintained when navigating between pages.
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
|
|
import React from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
import { useLanguage } from "@/contexts/LanguageContext";
|
|
import { LucideIcon } from "lucide-react";
|
|
|
|
interface MenuItemProps {
|
|
id: string;
|
|
path: string | null;
|
|
icon: LucideIcon;
|
|
translationKey: string;
|
|
color: string;
|
|
hasNavigation: boolean;
|
|
collapsed: boolean;
|
|
}
|
|
|
|
export const MenuItem: React.FC<MenuItemProps> = ({
|
|
id,
|
|
path,
|
|
icon: Icon,
|
|
translationKey,
|
|
color,
|
|
hasNavigation,
|
|
collapsed
|
|
}) => {
|
|
const { theme } = useTheme();
|
|
const { t } = useLanguage();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (hasNavigation && path) {
|
|
// Use navigate instead of window.location to prevent full page reload
|
|
navigate(path, { replace: false });
|
|
}
|
|
};
|
|
|
|
const isActive = path && location.pathname === path;
|
|
const mainIconSize = "h-6 w-6";
|
|
|
|
return (
|
|
<div
|
|
className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${isActive ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200 cursor-pointer`}
|
|
onClick={handleClick}
|
|
>
|
|
<Icon className={`${mainIconSize} ${color}`} />
|
|
{!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t(translationKey)}</span>}
|
|
</div>
|
|
);
|
|
}; |