diff --git a/src/features/prafrot/components/PrafrotSidebar.jsx b/src/features/prafrot/components/PrafrotSidebar.jsx
index 67151dd..8c99df5 100644
--- a/src/features/prafrot/components/PrafrotSidebar.jsx
+++ b/src/features/prafrot/components/PrafrotSidebar.jsx
@@ -41,7 +41,7 @@ const MENU_ITEMS = [
children: [
{ id: 'c-veiculos', label: 'Veículos', path: '/plataforma/prafrot/veiculos', icon: Car },
{ id: 'c-dispatcher', label: 'Dispatcher', path: '/plataforma/prafrot/dispatcher', icon: ClipboardList },
- { id: 'c-motoristas', label: 'Motoristas', path: '/plataforma/prafrot/motoristas', icon: Users, disabled: true, disabledReason: 'Funcionalidade em manutenção' },
+ // { id: 'c-motoristas', label: 'Motoristas', path: '/plataforma/prafrot/motoristas', icon: Users, disabled: true, disabledReason: 'Funcionalidade em manutenção' },
{ id: 'c-oficinas', label: 'Oficinas', path: '/plataforma/prafrot/oficinas', icon: Store }
]
},
@@ -57,18 +57,97 @@ const MENU_ITEMS = [
}
];
+// Optimized MenuItem component outside main render loop
+const MenuItem = React.memo(({ item, isSub = false, isCollapsed, expandedItems, toggleExpand, pathname, searchTerm }) => {
+ const Icon = item.icon;
+ const hasChildren = item.children && item.children.length > 0;
+ const isExpanded = expandedItems[item.id];
+ const isActive = pathname.startsWith(item.path) || (hasChildren && item.children.some(c => pathname.startsWith(c.path)));
+ const isLocked = item.disabled;
+
+ // Filter sub-items if searching
+ const subItems = item.children?.filter(child =>
+ !searchTerm || child.label.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const content = (
+
{
+ if (isLocked) return;
+ if (hasChildren) toggleExpand(item.id);
+ }}
+ title={isLocked ? item.disabledReason : (isCollapsed ? item.label : '')}
+ >
+
+ {(!isCollapsed || isSub) && {item.label}}
+
+ {hasChildren && !isCollapsed && (
+
+ )}
+
+ {isLocked && !isCollapsed && (
+
+ )}
+
+ );
+
+ return (
+
+ {item.path && !hasChildren && !isLocked ? (
+
+ {content}
+
+ ) : content}
+
+
+ {hasChildren && isExpanded && !isCollapsed && (
+
+ {subItems?.map(child => (
+
+ ))}
+
+ )}
+
+
+ );
+});
+
+MenuItem.displayName = 'MenuItem';
+
export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
const [searchTerm, setSearchTerm] = useState('');
const [expandedItems, setExpandedItems] = useState({ cadastros: true, gerencia: true });
const location = useLocation();
const { user, logout } = useAuthContext();
- const toggleExpand = (id) => {
+ const toggleExpand = React.useCallback((id) => {
setExpandedItems(prev => ({
...prev,
[id]: !prev[id]
}));
- };
+ }, []);
const filteredItems = useMemo(() => {
if (!searchTerm) return MENU_ITEMS;
@@ -87,71 +166,6 @@ export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
window.location.href = '/plataforma/prafrot/login';
};
- const MenuItem = ({ item, isSub = false }) => {
- const Icon = item.icon;
- const hasChildren = item.children && item.children.length > 0;
- const isExpanded = expandedItems[item.id];
- const isActive = location.pathname.startsWith(item.path) || (hasChildren && item.children.some(c => location.pathname.startsWith(c.path)));
- const isLocked = item.disabled;
-
- // Filter sub-items if searching
- const subItems = item.children?.filter(child =>
- !searchTerm || child.label.toLowerCase().includes(searchTerm.toLowerCase())
- );
-
- const content = (
- {
- if (isLocked) return;
- if (hasChildren) toggleExpand(item.id);
- }}
- title={isLocked ? item.disabledReason : (isCollapsed ? item.label : '')}
- >
-
- {(!isCollapsed || isSub) && {item.label}}
-
- {hasChildren && !isCollapsed && (
-
- )}
-
- {isLocked && !isCollapsed && (
-
- )}
-
- );
-
- return (
-
- {item.path && !hasChildren && !isLocked ? (
-
- {content}
-
- ) : content}
-
- {hasChildren && isExpanded && !isCollapsed && (
-
- {subItems.map(child => (
-
- ))}
-
- )}
-
- );
- };
-
return (