From 213fd709fdc513373cdcb391b606b18a83f6216b Mon Sep 17 00:00:00 2001
From: reallybeard <89934888+reallybeard@users.noreply.github.com>
Date: Mon, 6 May 2024 16:27:48 -0500
Subject: [PATCH] close drawer when sub item menu clicked

---
 .../Header/NavBar/Native/NativeMenu.tsx       | 23 +++++++++++--------
 .../Layout/Header/NavBar/UserMenu.tsx         |  3 +++
 .../Header/NavBar/WalletConnectedMenu.tsx     |  5 +++-
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/Layout/Header/NavBar/Native/NativeMenu.tsx b/src/components/Layout/Header/NavBar/Native/NativeMenu.tsx
index cd6d9b4e634..e4c1816dd20 100644
--- a/src/components/Layout/Header/NavBar/Native/NativeMenu.tsx
+++ b/src/components/Layout/Header/NavBar/Native/NativeMenu.tsx
@@ -1,6 +1,6 @@
 import { ChevronRightIcon, EditIcon } from '@chakra-ui/icons'
 import { Button, MenuDivider, MenuItem } from '@chakra-ui/react'
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { Text } from 'components/Text'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
@@ -8,23 +8,26 @@ import { useModal } from 'hooks/useModal/useModal'
 
 const chevronRightIcon = <ChevronRightIcon />
 const editIcon = <EditIcon />
+type NativeMenuProps = {
+  onClose?: () => void
+}
 
-export const NativeMenu = () => {
+export const NativeMenu: React.FC<NativeMenuProps> = ({ onClose }) => {
   const translate = useTranslate()
   const isAccountManagementEnabled = useFeatureFlag('AccountManagement')
 
   const backupNativePassphrase = useModal('backupNativePassphrase')
   const accountManagementPopover = useModal('manageAccounts')
 
-  const handleBackupMenuItemClick = useCallback(
-    () => backupNativePassphrase.open({}),
-    [backupNativePassphrase],
-  )
+  const handleBackupMenuItemClick = useCallback(() => {
+    onClose && onClose()
+    backupNativePassphrase.open({})
+  }, [backupNativePassphrase, onClose])
 
-  const handleManageAccountsMenuItemClick = useCallback(
-    () => accountManagementPopover.open({}),
-    [accountManagementPopover],
-  )
+  const handleManageAccountsMenuItemClick = useCallback(() => {
+    onClose && onClose()
+    accountManagementPopover.open({})
+  }, [accountManagementPopover, onClose])
 
   return (
     <>
diff --git a/src/components/Layout/Header/NavBar/UserMenu.tsx b/src/components/Layout/Header/NavBar/UserMenu.tsx
index 21270ca4e4f..5065701a117 100644
--- a/src/components/Layout/Header/NavBar/UserMenu.tsx
+++ b/src/components/Layout/Header/NavBar/UserMenu.tsx
@@ -49,6 +49,7 @@ const NoWallet = ({ onClick }: { onClick: () => void }) => {
 export type WalletConnectedProps = {
   onDisconnect: () => void
   onSwitchProvider: () => void
+  onClose?: () => void
 } & Pick<InitialState, 'walletInfo' | 'isConnected' | 'connectedType'>
 
 export const WalletConnected = (props: WalletConnectedProps) => {
@@ -60,6 +61,7 @@ export const WalletConnected = (props: WalletConnectedProps) => {
         onDisconnect={props.onDisconnect}
         onSwitchProvider={props.onSwitchProvider}
         connectedType={props.connectedType}
+        onClose={props.onClose}
       />
     </MemoryRouter>
   )
@@ -191,6 +193,7 @@ export const UserMenu: React.FC<{ onClick?: () => void }> = memo(({ onClick }) =
                 onDisconnect={disconnect}
                 onSwitchProvider={handleConnect}
                 connectedType={connectedType}
+                onClose={onClick}
               />
             ) : (
               <NoWallet onClick={handleConnect} />
diff --git a/src/components/Layout/Header/NavBar/WalletConnectedMenu.tsx b/src/components/Layout/Header/NavBar/WalletConnectedMenu.tsx
index f4577cd0a77..6c1b3fa718a 100644
--- a/src/components/Layout/Header/NavBar/WalletConnectedMenu.tsx
+++ b/src/components/Layout/Header/NavBar/WalletConnectedMenu.tsx
@@ -27,6 +27,7 @@ const ConnectedMenu = memo(
     walletInfo,
     onDisconnect,
     onSwitchProvider,
+    onClose,
   }: WalletConnectedProps & {
     connectedWalletMenuRoutes: boolean
   }) => {
@@ -74,7 +75,7 @@ const ConnectedMenu = memo(
               {translate('connectWallet.menu.connecting')}
             </MenuItem>
           )}
-          {ConnectMenuComponent && <ConnectMenuComponent />}
+          {ConnectMenuComponent && <ConnectMenuComponent onClose={onClose} />}
           <MenuDivider />
           <MenuItem icon={repeatIcon} onClick={onSwitchProvider}>
             {translate('connectWallet.menu.switchWallet')}
@@ -94,6 +95,7 @@ export const WalletConnectedMenu = ({
   walletInfo,
   isConnected,
   connectedType,
+  onClose,
 }: WalletConnectedProps) => {
   const location = useLocation()
 
@@ -128,6 +130,7 @@ export const WalletConnectedMenu = ({
               walletInfo={walletInfo}
               onDisconnect={onDisconnect}
               onSwitchProvider={onSwitchProvider}
+              onClose={onClose}
             />
           </SubMenuContainer>
         </Route>