Merge pull request #134 from ethereum/documentationDropdownClose

[UX] - Interaction with documentation dropdown is confusing on mobile

src/components/UI/docs/DocsLinks.tsx

@@ -19,9 +19,10 @@ import { NavLink } from '../../../types';
 
 interface Props {
   navLinks: NavLink[];
+  toggleMobileAccordion: () => void;
 }
 
-export const DocsLinks: FC<Props> = ({ navLinks }) => {
+export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -53,7 +54,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                     >
                       {to ? (
                         <NextLink href={to} passHref legacyBehavior>
-                          <Link textDecoration='none !important'>
+                          <Link textDecoration='none !important' onClick={toggleMobileAccordion}>
                             <Text
                               textStyle='docs-nav-dropdown'
                               color={isActive ? 'primary' : 'unset'}
@@ -89,7 +90,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                   </AccordionButton>
                   {items && (
                     <AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}>
-                      <LinksList links={items} />
+                      <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion} />
                     </AccordionPanel>
                   )}
                 </>

src/components/UI/docs/DocsNav.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import {
   Accordion,
   AccordionButton,
@@ -17,14 +17,20 @@ interface Props {
 }
 
 export const DocsNav: FC<Props> = ({ navLinks }) => {
+  const [isMobileAccordionOpen, setMobileAccordionState] = useState(false)
+
+  const toggleMobileAccordion = () => {
+    setMobileAccordionState(prev => !prev)
+  }
+
   return (
     <Stack w={{ base: '100%', lg: 72 }}>
       <Stack display={{ base: 'none', lg: 'block' }}>
-        <DocsLinks navLinks={navLinks} />
+        <DocsLinks navLinks={navLinks} toggleMobileAccordion={toggleMobileAccordion} />
       </Stack>
 
       <Stack display={{ base: 'block', lg: 'none' }}>
-        <Accordion allowToggle>
+        <Accordion allowToggle index={isMobileAccordionOpen ? 0 : -1} onChange={toggleMobileAccordion}>
           <AccordionItem border='none'>
             <AccordionButton
               display='flex'
@@ -49,7 +55,7 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
               <AccordionIcon />
             </AccordionButton>
             <AccordionPanel p={0}>
-              <DocsLinks navLinks={navLinks} />
+              <DocsLinks navLinks={navLinks} toggleMobileAccordion={toggleMobileAccordion} />
             </AccordionPanel>
           </AccordionItem>
         </Accordion>

src/components/UI/docs/LinksList.tsx

@@ -7,9 +7,10 @@ import { NavLink } from '../../../types';
 
 interface LinksListProps {
   links: NavLink[];
+  toggleMobileAccordion: () => void;
 }
 
-export const LinksList: FC<LinksListProps> = ({ links }) => {
+export const LinksList: FC<LinksListProps> = ({ links, toggleMobileAccordion }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -25,7 +26,7 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
             data-group
           >
             <NextLink href={to} passHref key={id} legacyBehavior>
-              <Link textDecoration='none !important'>
+              <Link textDecoration='none !important' onClick={toggleMobileAccordion}>
                 <Text
                   textStyle='docs-nav-links'
                   color={items || isActive ? 'primary' : 'body'}
@@ -45,14 +46,14 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
                 </Text>
               </Link>
             </NextLink>
-            {items && <LinksList links={items} />}
+            {items && <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion}/>}
           </Stack>
         ) : (
           <Stack key={id} pb={6}>
             <Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
               {id}
             </Text>
-            {items && <LinksList links={items} />}
+            {items && <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion} />}
           </Stack>
         );
       })}