From e40886b1203cbda6d31db1e7f642fcec88c03087 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Mon, 18 Sep 2023 17:18:14 -0300
Subject: [PATCH] Side menu stays open after selecting a menu item on mobile

Fixes #1182
---
 ui/snippets/header/Burger.tsx                  |  5 ++++-
 ui/snippets/navigation/NavLink.tsx             |  4 +++-
 ui/snippets/navigation/NavigationMobile.tsx    | 14 +++++++++-----
 ui/snippets/profileMenu/ProfileMenuContent.tsx | 16 +++++++++++++---
 ui/snippets/profileMenu/ProfileMenuMobile.tsx  |  2 +-
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/ui/snippets/header/Burger.tsx b/ui/snippets/header/Burger.tsx
index dd9d7d5da5..08f655b915 100644
--- a/ui/snippets/header/Burger.tsx
+++ b/ui/snippets/header/Burger.tsx
@@ -55,7 +55,10 @@ const Burger = () => {
                 />
               ) : <Box boxSize={ 9 }/> }
             </Flex>
-            { networkMenu.isOpen ? <NetworkMenuContentMobile tabs={ networkMenu.availableTabs } items={ networkMenu.data }/> : <NavigationMobile/> }
+            { networkMenu.isOpen ?
+              <NetworkMenuContentMobile tabs={ networkMenu.availableTabs } items={ networkMenu.data }/> :
+              <NavigationMobile onNavLinkClick={ onClose }/>
+            }
           </DrawerBody>
         </DrawerContent>
       </Drawer>
diff --git a/ui/snippets/navigation/NavLink.tsx b/ui/snippets/navigation/NavLink.tsx
index 4bf6131ea7..3bf8ef24c3 100644
--- a/ui/snippets/navigation/NavLink.tsx
+++ b/ui/snippets/navigation/NavLink.tsx
@@ -18,9 +18,10 @@ type Props = {
   isCollapsed?: boolean;
   px?: string | number;
   className?: string;
+  onClick?: () => void;
 }
 
-const NavLink = ({ item, isCollapsed, px, className }: Props) => {
+const NavLink = ({ item, isCollapsed, px, className, onClick }: Props) => {
   const isMobile = useIsMobile();
   const colors = useColors();
 
@@ -41,6 +42,7 @@ const NavLink = ({ item, isCollapsed, px, className }: Props) => {
       px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
       aria-label={ `${ item.text } link` }
       whiteSpace="nowrap"
+      onClick={ onClick }
     >
       <Tooltip
         label={ item.text }
diff --git a/ui/snippets/navigation/NavigationMobile.tsx b/ui/snippets/navigation/NavigationMobile.tsx
index 5a76425013..a55365793d 100644
--- a/ui/snippets/navigation/NavigationMobile.tsx
+++ b/ui/snippets/navigation/NavigationMobile.tsx
@@ -9,7 +9,11 @@ import NavLink from 'ui/snippets/navigation/NavLink';
 
 import NavLinkGroupMobile from './NavLinkGroupMobile';
 
-const NavigationMobile = () => {
+interface Props {
+  onNavLinkClick?: () => void;
+}
+
+const NavigationMobile = ({ onNavLinkClick }: Props) => {
   const { mainNavItems, accountNavItems } = useNavItems();
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
@@ -59,7 +63,7 @@ const NavigationMobile = () => {
               if (isGroupItem(item)) {
                 return <NavLinkGroupMobile key={ item.text } item={ item } onClick={ onGroupItemOpen(index) }/>;
               } else {
-                return <NavLink key={ item.text } item={ item }/>;
+                return <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick }/>;
               }
             }) }
           </VStack>
@@ -73,7 +77,7 @@ const NavigationMobile = () => {
             borderColor="divider"
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
-              { accountNavItems.map((item) => <NavLink key={ item.text } item={ item }/>) }
+              { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick }/>) }
             </VStack>
           </Box>
         ) }
@@ -109,10 +113,10 @@ const NavigationMobile = () => {
                     borderColor: 'divider',
                   }}
                 >
-                  { item.map(subItem => <NavLink key={ subItem.text } item={ subItem }/>) }
+                  { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick }/>) }
                 </Box>
               ) :
-                <NavLink key={ item.text } item={ item } mb={ 1 }/>,
+                <NavLink key={ item.text } item={ item } mb={ 1 } onClick={ onNavLinkClick }/>,
             ) }
           </Box>
         </Box>
diff --git a/ui/snippets/profileMenu/ProfileMenuContent.tsx b/ui/snippets/profileMenu/ProfileMenuContent.tsx
index bfa6685d55..00f18e01f2 100644
--- a/ui/snippets/profileMenu/ProfileMenuContent.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuContent.tsx
@@ -12,9 +12,10 @@ const feature = config.features.account;
 
 type Props = {
   data?: UserInfo;
+  onNavLinkClick?: () => void;
 };
 
-const ProfileMenuContent = ({ data }: Props) => {
+const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
   const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
@@ -45,10 +46,19 @@ const ProfileMenuContent = ({ data }: Props) => {
           { data.email }
         </Text>
       ) }
-      <NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false }/>
+      <NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/>
       <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
-          { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isActive={ undefined } isCollapsed={ false } px="0px"/>) }
+          { accountNavItems.map((item) => (
+            <NavLink
+              key={ item.text }
+              item={ item }
+              isActive={ undefined }
+              isCollapsed={ false }
+              px="0px"
+              onClick={ onNavLinkClick }
+            />
+          )) }
         </VStack>
       </Box>
       <Box mt={ 2 } pt={ 3 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
diff --git a/ui/snippets/profileMenu/ProfileMenuMobile.tsx b/ui/snippets/profileMenu/ProfileMenuMobile.tsx
index c21552f323..b66206f9f5 100644
--- a/ui/snippets/profileMenu/ProfileMenuMobile.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuMobile.tsx
@@ -52,7 +52,7 @@ const ProfileMenuMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="260px">
             <DrawerBody p={ 6 }>
-              <ProfileMenuContent data={ data }/>
+              <ProfileMenuContent data={ data } onNavLinkClick={ onClose }/>
             </DrawerBody>
           </DrawerContent>
         </Drawer>