Side menu stays open after selecting a menu item on mobile (#1195)

Fixes #1182

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>

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 }

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>

ui/snippets/profileMenu/ProfileMenuContent.tsx

@@ -13,9 +13,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');
 
@@ -54,10 +55,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() }>

ui/snippets/profileMenu/ProfileMenuMobile.tsx

@@ -62,7 +62,7 @@ const ProfileMenuMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="260px">
             <DrawerBody p={ 6 }>
-              <ProfileMenuContent data={ data }/>
+              <ProfileMenuContent data={ data } onNavLinkClick={ onClose }/>
             </DrawerBody>
           </DrawerContent>
         </Drawer>