From db50bcc42a455d0c18d5b4c80e09397554a40c46 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Sat, 12 Feb 2022 08:43:33 +0500
Subject: [PATCH] fix: parent is always undefined for submenus

---
 apps/web/src/components/global-menu-wrapper/index.js | 7 ++++++-
 apps/web/src/components/menu/index.js                | 4 ++--
 apps/web/src/components/menu/menu-item.js            | 6 +-----
 apps/web/src/hooks/use-menu.js                       | 8 ++++++--
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/global-menu-wrapper/index.js b/apps/web/src/components/global-menu-wrapper/index.js
index 1aebd83ae..bf281fdd1 100644
--- a/apps/web/src/components/global-menu-wrapper/index.js
+++ b/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>
   );
 }
diff --git a/apps/web/src/components/menu/index.js b/apps/web/src/components/menu/index.js
index 6c6f6294d..57b7b0811 100644
--- a/apps/web/src/components/menu/index.js
+++ b/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}
diff --git a/apps/web/src/components/menu/menu-item.js b/apps/web/src/components/menu/menu-item.js
index f03549a19..7fff32265 100644
--- a/apps/web/src/components/menu/menu-item.js
+++ b/apps/web/src/components/menu/menu-item.js
@@ -141,11 +141,7 @@ function MenuItem({
             // left: itemRef.current?.offsetWidth,
           }}
         >
-          <Menu
-            items={items}
-            closeMenu={closeMenu}
-            data={{ ...data, parent: item, title: undefined }}
-          />
+          <Menu items={items} closeMenu={closeMenu} data={data} />
         </Flex>
       )}
     </Flex>
diff --git a/apps/web/src/hooks/use-menu.js b/apps/web/src/hooks/use-menu.js
index b969d55ac..a27de29ad 100644
--- a/apps/web/src/hooks/use-menu.js
+++ b/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;