Refactor MenuItem component to improve active state management and st…

…yling

- Enhanced the logic for determining active menu items, allowing for accurate representation of active states for both parent and child items.
- Updated the CSS styles for the expand icon to reflect active states, improving visual feedback for user interactions.
- Improved code clarity by encapsulating active state logic within a dedicated function, enhancing maintainability.

These changes significantly enhance the user experience by providing clearer navigation cues within the Chat interface.

packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx

@@ -189,7 +189,16 @@ const MenuItem: FC<{
 }> = ({ item, level, expanded, activeId, onToggle, onSelect, searchTerm }) => {
 	const hasChildren = item.children && item.children.length > 0
 	const isExpanded = expanded[item.id]
-	const isActive = activeId === item.id
+
+	// Check if current item or any of its children are active
+	const isActive = (currentItem: MenuItem): boolean => {
+		if (currentItem.id === activeId) return true
+		if (currentItem.children) {
+			return currentItem.children.some((child) => isActive(child))
+		}
+		return false
+	}
+
 	const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase())
 	const hasMatchingChildren =
 		item.children?.some((child) => child.name.toLowerCase().includes(searchTerm.toLowerCase())) || false
@@ -204,7 +213,7 @@ const MenuItem: FC<{
 				className={clsx('menu-item', {
 					expanded: isExpanded,
 					'has-children': hasChildren,
-					active: isActive
+					active: isActive(item)
 				})}
 				onClick={() => {
 					if (item.link) {
@@ -226,7 +235,7 @@ const MenuItem: FC<{
 					<Icon
 						name={isExpanded ? 'material-expand_less' : 'material-expand_more'}
 						size={16}
-						className='expand-icon'
+						className={clsx('expand-icon', { active: isActive(item) })}
 					/>
 				)}
 			</div>

packages/xgen/layouts/wrappers/Chat/Container/styles.css

@@ -469,7 +469,6 @@
 
 .menu-item.expanded .expand-icon {
 	opacity: 1;
-	color: var(--color_main);
 }
 
 .menu-children {