Auto-deploy: 2026-01-13 12:49:39 | 1 arquivo(s) alterado(s)

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,41 +57,12 @@ const MENU_ITEMS = [
   }
 ];
 
-export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
+// Optimized MenuItem component outside main render loop
-  const [searchTerm, setSearchTerm] = useState('');
+const MenuItem = React.memo(({ item, isSub = false, isCollapsed, expandedItems, toggleExpand, pathname, searchTerm }) => {
-  const [expandedItems, setExpandedItems] = useState({ cadastros: true, gerencia: true });
-  const location = useLocation();
-  const { user, logout } = useAuthContext();
-
-  const toggleExpand = (id) => {
-    setExpandedItems(prev => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  };
-
-  const filteredItems = useMemo(() => {
-    if (!searchTerm) return MENU_ITEMS;
-    
-    return MENU_ITEMS.filter(item => {
-      const matchParent = item.label.toLowerCase().includes(searchTerm.toLowerCase());
-      const matchChildren = item.children?.some(child => 
-        child.label.toLowerCase().includes(searchTerm.toLowerCase())
-      );
-      return matchParent || matchChildren;
-    });
-  }, [searchTerm]);
-
-  const handleLogout = () => {
-    logout();
-    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 isActive = pathname.startsWith(item.path) || (hasChildren && item.children.some(c => pathname.startsWith(c.path)));
   const isLocked = item.disabled;
 
   // Filter sub-items if searching
@@ -136,6 +107,7 @@ export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
         </Link>
       ) : content}
 
+      <AnimatePresence>
         {hasChildren && isExpanded && !isCollapsed && (
           <motion.div 
             initial={{ opacity: 0, height: 0 }}
@@ -143,13 +115,55 @@ export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
             exit={{ opacity: 0, height: 0 }}
             className="pfs-submenu"
           >
-            {subItems.map(child => (
+            {subItems?.map(child => (
-              <MenuItem key={child.id} item={child} isSub />
+              <MenuItem 
+                key={child.id} 
+                item={child} 
+                isSub 
+                isCollapsed={isCollapsed}
+                expandedItems={expandedItems}
+                toggleExpand={toggleExpand}
+                pathname={pathname}
+                searchTerm={searchTerm}
+              />
             ))}
           </motion.div>
         )}
+      </AnimatePresence>
     </div>
   );
+});
+
+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 = React.useCallback((id) => {
+    setExpandedItems(prev => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  }, []);
+
+  const filteredItems = useMemo(() => {
+    if (!searchTerm) return MENU_ITEMS;
+    
+    return MENU_ITEMS.filter(item => {
+      const matchParent = item.label.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchChildren = item.children?.some(child => 
+        child.label.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      return matchParent || matchChildren;
+    });
+  }, [searchTerm]);
+
+  const handleLogout = () => {
+    logout();
+    window.location.href = '/plataforma/prafrot/login';
   };
 
   return (
@@ -175,7 +189,15 @@ export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
 
       <nav className="pfs-nav-content custom-scrollbar">
         {filteredItems.map(item => (
-          <MenuItem key={item.id} item={item} />
+          <MenuItem 
+            key={item.id} 
+            item={item} 
+            isCollapsed={isCollapsed}
+            expandedItems={expandedItems}
+            toggleExpand={toggleExpand}
+            pathname={location.pathname}
+            searchTerm={searchTerm}
+          />
         ))}
       </nav>