fix: hiding action items while editing menu items

Author: olaslo

src/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.tsx

@@ -51,7 +51,7 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
         onMenuGroupsChanged,
     } = useAsideHeaderInnerContext();
     const items = useGroupedMenuItems(menuItems, menuGroups, true);
-
+    console.log(items);
     const menuItemsRef = useRef(items);
     menuItemsRef.current = items;
 
@@ -161,8 +161,8 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
 
             const currentFlatList = menuItemsRef.current || [];
 
+            console.log([...currentFlatList]);
             const updatedItems = sortMenuItems(oldIndex, newIndex, currentFlatList);
-
             if (updatedItems) {
                 onMenuItemsChanged?.(updatedItems);
             }
@@ -282,6 +282,10 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
         ],
     );
 
+    const data = items.filter(
+        (item) => item.id !== ALL_PAGES_ID && item.type !== 'divider' && item.type !== 'action',
+    );
+
     return (
         <Flex className={b(null, className)} gap="5" direction="column">
             <Flex gap="4" alignItems="center" justifyContent="space-between">
@@ -304,7 +308,7 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
                     sortable={isEditMode && editMenuProps?.enableSorting}
                     virtualized={false}
                     filterable={false}
-                    items={items}
+                    items={data}
                     renderItem={renderFirstLevelItem}
                 />
             </Flex>

src/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.ts

@@ -16,13 +16,23 @@ export const useGroupedMenuItems = (
                 return false;
             }
 
-            if (isEditMode && (item.id === ALL_PAGES_ID || item.type === 'action')) {
+            if (isEditMode && item.id === ALL_PAGES_ID) {
                 return false;
             }
 
             return true;
         });
 
+        visibleItems.sort(({type: typeA}, {type: typeB}) => {
+            if (typeA === 'action') {
+                return 1;
+            }
+            if (typeB === 'action') {
+                return -1;
+            }
+            return 0;
+        });
+
         const groupsMap = new Map<string, MenuGroup>();
 
         menuGroups?.forEach((group) => {