MenuCraft Copy this MUI StyledCardto Your Project

{(item.subMenu ?? []).map((subMenu, idx) => { // Check if this submenu item is active const isSubActive = pathname === subMenu.href; return ( <NavLink onClick={handleCloseMenu} to={subMenu.href} key={idx} style={({ isActive }) => ({ display: 'block', color: isActive ? '#fa4f36' : '#000', textDecoration: isActive ? 'underline' : 'none', margin: '2px 0', padding: '2px', })} > <Typography color={isSubActive ? '#fa4f36' : '#000'} sx={{ cursor: 'pointer', fontWeight: isSubActive ? 'bold' : 'normal', ':hover': { color: '#fa4f36', textDecorationLine: 'underline', }, }} > {subMenu.name} </Typography> </NavLink> ); })}