fix: parent is always undefined for submenus

apps/web/src/components/global-menu-wrapper/index.js

@@ -71,7 +71,12 @@ function GlobalMenuWrapper() {
         },
       }}
     >
-      <Menu items={items} data={data} closeMenu={closeMenu} />
+      <Menu
+        items={items}
+        data={data}
+        title={data.title}
+        closeMenu={closeMenu}
+      />
     </Modal>
   );
 }

apps/web/src/components/menu/index.js

@@ -62,12 +62,12 @@ function useMenuFocus(items) {
   return [focusIndex, setFocusIndex, isSubmenuOpen, setIsSubmenuOpen];
 }
 
-function Menu({ items, data, closeMenu }) {
+function Menu({ items, data, title, closeMenu }) {
   const [focusIndex, setFocusIndex, isSubmenuOpen, setIsSubmenuOpen] =
     useMenuFocus(items);
 
   return (
-    <MenuContainer title={data?.title}>
+    <MenuContainer title={title}>
       {items.map((item, index) => (
         <MenuItem
           key={item.key}

apps/web/src/components/menu/menu-item.js

@@ -141,11 +141,7 @@ function MenuItem({
             // left: itemRef.current?.offsetWidth,
           }}
         >
-          <Menu
+          <Menu items={items} closeMenu={closeMenu} data={data} />
-            items={items}
-            closeMenu={closeMenu}
-            data={{ ...data, parent: item, title: undefined }}
-          />
         </Flex>
       )}
     </Flex>

apps/web/src/hooks/use-menu.js

@@ -179,11 +179,15 @@ function mapMenuItems(items, data) {
       color,
       iconColor,
 
-      items: hasSubmenu ? mapMenuItems(items, data) : [],
-
       modifier: modifier?.join("+"),
     };
 
+    if (hasSubmenu)
+      menuItem.items = mapMenuItems(items, {
+        ...data,
+        parent: menuItem,
+      });
+
     prev.push(menuItem);
 
     return prev;