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

This commit is contained in:
daivid.alves 2026-01-13 12:49:39 -03:00
parent 9f125250a6
commit 5813271e9f
1 changed files with 91 additions and 69 deletions

View File

@ -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 }) => {
const [searchTerm, setSearchTerm] = useState('');
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 }) => {
// 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 = 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 => (
<MenuItem key={child.id} item={child} isSub />
{subItems?.map(child => (
<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>