From de50804850154ffc5ed7704a92b83a2b1cb53484 Mon Sep 17 00:00:00 2001
From: Max <shadow.iqka@qq.com>
Date: Mon, 23 Dec 2024 09:33:15 +0800
Subject: [PATCH] Refactor MenuItem component to improve active state
 management and styling

- 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.
---
 .../xgen/layouts/wrappers/Chat/Container/Menu.tsx | 15 ++++++++++++---
 .../layouts/wrappers/Chat/Container/styles.css    |  1 -
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx b/packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx
index 772217a..510bc0d 100644
--- a/packages/xgen/layouts/wrappers/Chat/Container/Menu.tsx
+++ b/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>
diff --git a/packages/xgen/layouts/wrappers/Chat/Container/styles.css b/packages/xgen/layouts/wrappers/Chat/Container/styles.css
index 286220d..db71d16 100644
--- a/packages/xgen/layouts/wrappers/Chat/Container/styles.css
+++ b/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 {