To resolve the api.collapseAll is not a function error, implement the collapseAll function in the API and ensure it is correctly referenced in the Menu.tsx file.

1. Implement collapseAll in the API:

   • Locate the API file where other functions like toggleNav, toggleToolbar, etc., are defined.
   • Add the collapseAll function.

   // Example API implementation
   export const collapseAll = () => {
     // Logic to collapse all items
   };

2. Update Menu.tsx:

   • Ensure collapseAll is correctly imported and used in the useMenu hook.

   import { collapseAll } from 'path-to-api';
   
   const collapse = useMemo(
     () => ({
       id: 'collapse',
       title: 'Collapse all',
       onClick: () => api.collapseAll(),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.collapseAll} /> : null,
     }),
     [api, enableShortcuts, shortcutKeys]
   );

3. Ensure useExpanded.ts handles collapse events:

   • Verify that useExpanded correctly listens for STORIES_COLLAPSE_ALL events and calls the collapseAll function.

   useEffect(() => {
     if (!api) return noop;
   
     api.on(STORIES_COLLAPSE_ALL, collapseAll);
   
     return () => {
       api.off(STORIES_COLLAPSE_ALL, collapseAll);
     };
   }, [api, collapseAll]);

References

/code/core/src/manager/container/Menu.tsx
/code/core/src/manager/components/sidebar/useExpanded.ts