close mobile docs dropdown when page is selected

src/components/UI/docs/DocsLinks.tsx

@@ -19,9 +19,10 @@ import { NavLink } from '../../../types';
 
 interface Props {
   navLinks: NavLink[];
+  updateMobileAccordionState: () => void;
 }
 
-export const DocsLinks: FC<Props> = ({ navLinks }) => {
+export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -52,7 +53,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                       _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
                     >
                       {to ? (
-                        <NextLink href={to} passHref>
+                        <NextLink href={to} passHref onClick={updateMobileAccordionState}>
                           <Link textDecoration='none !important'>
                             <Text
                               textStyle='docs-nav-dropdown'
@@ -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} updateMobileAccordionState={updateMobileAccordionState} />
                     </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,22 @@ interface Props {
 }
 
 export const DocsNav: FC<Props> = ({ navLinks }) => {
+  const OPEN = 0;
+  const CLOSED = -1;
+  const [mobileAccordionState, setMobileAccordionState] = useState(CLOSED)
+
+  const updateMobileAccordionState = () => {
+    setMobileAccordionState(mobileAccordionState === OPEN ? CLOSED : OPEN)
+  }
+
   return (
     <Stack w={{ base: '100%', lg: 72 }}>
       <Stack display={{ base: 'none', lg: 'block' }}>
-        <DocsLinks navLinks={navLinks} />
+        <DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
       </Stack>
 
       <Stack display={{ base: 'block', lg: 'none' }}>
-        <Accordion allowToggle>
+        <Accordion allowToggle index={mobileAccordionState} onChange={updateMobileAccordionState}>
           <AccordionItem border='none'>
             <AccordionButton
               display='flex'
@@ -49,7 +57,7 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
               <AccordionIcon />
             </AccordionButton>
             <AccordionPanel p={0}>
-              <DocsLinks navLinks={navLinks} />
+              <DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
             </AccordionPanel>
           </AccordionItem>
         </Accordion>

src/components/UI/docs/LinksList.tsx

@@ -7,9 +7,10 @@ import { NavLink } from '../../../types';
 
 interface LinksListProps {
   links: NavLink[];
+  updateMobileAccordionState: () => void;
 }
 
-export const LinksList: FC<LinksListProps> = ({ links }) => {
+export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionState }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -19,7 +20,7 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
         const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
         return to ? (
           <Stack key={id} pb={items ? 6 : 0} _hover={{ background: 'primary', color: 'bg' }} data-group>
-            <NextLink href={to} passHref key={id}>
+            <NextLink href={to} passHref key={id} onClick={updateMobileAccordionState}>
               <Link textDecoration='none !important'>
                 <Text
                   textStyle='docs-nav-links'
@@ -41,14 +42,14 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
                 </Text>
               </Link>
             </NextLink>
-            {items && <LinksList links={items} />}
+            {items && <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState}/>}
           </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} updateMobileAccordionState={updateMobileAccordionState} />}
           </Stack>
         );
       })}