1

video-gen-app/src/components/Layout/AppLayout.tsx

@@ -299,8 +299,6 @@ const AppLayout: React.FC = () => {
     });
   });
 
-  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
-
   const handleMobileMenuClick = (item: MenuConfig) => {
     const menuType = item.menu_type ?? item.menuType;
     const hasChildren = childMap[item.id] && childMap[item.id].length > 0;
@@ -444,18 +442,12 @@ const AppLayout: React.FC = () => {
     const hasChildren = childMap[item.id] && childMap[item.id].length > 0;
     const menuType = item.menu_type ?? item.menuType;
     const isGroup = menuType === 'group';
-    const isExpanded = collapsedGroups[item.id] !== true;
 
     return (
       <div key={item.id}>
         <div 
           onClick={() => {
-            if (isGroup || hasChildren) {
-              setCollapsedGroups(prev => ({
-                ...prev,
-                [item.id]: !prev[item.id]
-              }));
-            } else if (item.path) {
+            if (!(isGroup || hasChildren) && item.path) {
               navigate(item.path);
             }
           }} 
@@ -464,14 +456,15 @@ const AppLayout: React.FC = () => {
             justifyContent: 'flex-start',
             gap: 10,
             padding: depth > 0 ? '6px 12px 6px 32px' : '6px 14px',
-            borderRadius: 12, margin: '1px 4px', cursor: 'pointer',
+            borderRadius: 12, margin: '1px 4px',
+            cursor: isGroup || hasChildren ? 'default' : 'pointer',
             fontSize: depth > 0 ? 13 : 14, fontWeight: isActive ? 600 : 400,
             color: isActive ? '#4f46e5' : (isGroup ? '#94a3b8' : '#475569'),
             background: isActive ? 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%)' : 'transparent',
             transition: 'all 0.2s ease',
           }}
           onMouseEnter={(e) => {
-            if (!isGroup && !isActive) {
+            if (!isGroup && !isActive && !(isGroup || hasChildren)) {
               e.currentTarget.style.background = 'rgba(99, 102, 241, 0.05)';
             }
           }}
@@ -491,19 +484,9 @@ const AppLayout: React.FC = () => {
           <span style={{ whiteSpace: 'nowrap', flex: 1, textAlign: 'left', fontWeight: isGroup ? 600 : (isActive ? 600 : 400), fontSize: isGroup ? 12 : (depth > 0 ? 13 : 14), textTransform: isGroup ? 'uppercase' : 'none', letterSpacing: isGroup ? 0.5 : 0 }}>
             {item.label}
           </span>
-          {(isGroup || hasChildren) && (
-            <span style={{ 
-              fontSize: isGroup ? 12 : 14, 
-              color: '#cbd5e1',
-              transition: 'transform 0.2s ease',
-              transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-            }}>
-              <RightOutlined />
-            </span>
-          )}
         </div>
         
-        {(isGroup || hasChildren) && isExpanded && (
+        {(isGroup || hasChildren) && (
           <div style={{ overflow: 'hidden' }}>
             {(childMap[item.id] || []).map(c => renderMenuItem(c, depth + 1))}
           </div>