From 1b5195908c23208db2a056f8a0d7b8b4132c3dce Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 6 Dec 2022 16:19:55 -0700
Subject: [PATCH 1/5] close mobile docs dropdown when page is selected

---
 src/components/UI/docs/DocsLinks.tsx |  7 ++++---
 src/components/UI/docs/DocsNav.tsx   | 16 ++++++++++++----
 src/components/UI/docs/LinksList.tsx |  9 +++++----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index ab77e803ae..1eb9d48bf3 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/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>
                   )}
                 </>
diff --git a/src/components/UI/docs/DocsNav.tsx b/src/components/UI/docs/DocsNav.tsx
index 3dcb661d4e..e086db3748 100644
--- a/src/components/UI/docs/DocsNav.tsx
+++ b/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>
diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index 6c9d838e1d..ed2674204b 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/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>
         );
       })}

From 62aff31a2e987fb53cda7764910107cd99f6761a Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Mon, 12 Dec 2022 11:58:30 -0700
Subject: [PATCH 2/5] Update src/components/UI/docs/DocsNav.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/UI/docs/DocsNav.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/UI/docs/DocsNav.tsx b/src/components/UI/docs/DocsNav.tsx
index e086db3748..5bccc680c4 100644
--- a/src/components/UI/docs/DocsNav.tsx
+++ b/src/components/UI/docs/DocsNav.tsx
@@ -17,12 +17,10 @@ interface Props {
 }
 
 export const DocsNav: FC<Props> = ({ navLinks }) => {
-  const OPEN = 0;
-  const CLOSED = -1;
-  const [mobileAccordionState, setMobileAccordionState] = useState(CLOSED)
+  const [isMobileAccordionOpen, setIsMobileAccordionOpen] = useState(false)
 
-  const updateMobileAccordionState = () => {
-    setMobileAccordionState(mobileAccordionState === OPEN ? CLOSED : OPEN)
+  const toggleMobileAccordion = () => {
+    setMobileAccordionState(prev => !prev)
   }
 
   return (

From 657083d7f28b4671ee99016d4fde3a88319cb5e2 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Mon, 12 Dec 2022 12:03:22 -0700
Subject: [PATCH 3/5] change requests

---
 src/components/UI/docs/DocsLinks.tsx |  8 ++++----
 src/components/UI/docs/DocsNav.tsx   |  8 ++++----
 src/components/UI/docs/LinksList.tsx | 10 +++++-----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index dcb8d1e3b9..fefa420555 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/src/components/UI/docs/DocsLinks.tsx
@@ -19,10 +19,10 @@ import { NavLink } from '../../../types';
 
 interface Props {
   navLinks: NavLink[];
-  updateMobileAccordionState: () => void;
+  toggleMobileAccordion: () => void;
 }
 
-export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) => {
+export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -53,7 +53,7 @@ export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) =
                       _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
                     >
                       {to ? (
-                        <NextLink href={to} passHref onClick={updateMobileAccordionState}>
+                        <NextLink href={to} passHref onClick={toggleMobileAccordion}>
                           <Link textDecoration='none !important'>
                             <Text
                               textStyle='docs-nav-dropdown'
@@ -90,7 +90,7 @@ export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) =
                   </AccordionButton>
                   {items && (
                     <AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}>
-                      <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState} />
+                      <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion} />
                     </AccordionPanel>
                   )}
                 </>
diff --git a/src/components/UI/docs/DocsNav.tsx b/src/components/UI/docs/DocsNav.tsx
index 5bccc680c4..91f8d37ce3 100644
--- a/src/components/UI/docs/DocsNav.tsx
+++ b/src/components/UI/docs/DocsNav.tsx
@@ -17,7 +17,7 @@ interface Props {
 }
 
 export const DocsNav: FC<Props> = ({ navLinks }) => {
-  const [isMobileAccordionOpen, setIsMobileAccordionOpen] = useState(false)
+  const [isMobileAccordionOpen, setMobileAccordionState] = useState(false)
 
   const toggleMobileAccordion = () => {
     setMobileAccordionState(prev => !prev)
@@ -26,11 +26,11 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
   return (
     <Stack w={{ base: '100%', lg: 72 }}>
       <Stack display={{ base: 'none', lg: 'block' }}>
-        <DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
+        <DocsLinks navLinks={navLinks} toggleMobileAccordion={toggleMobileAccordion} />
       </Stack>
 
       <Stack display={{ base: 'block', lg: 'none' }}>
-        <Accordion allowToggle index={mobileAccordionState} onChange={updateMobileAccordionState}>
+        <Accordion allowToggle index={isMobileAccordionOpen ? 0 : -1} onChange={toggleMobileAccordion}>
           <AccordionItem border='none'>
             <AccordionButton
               display='flex'
@@ -55,7 +55,7 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
               <AccordionIcon />
             </AccordionButton>
             <AccordionPanel p={0}>
-              <DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
+              <DocsLinks navLinks={navLinks} toggleMobileAccordion={toggleMobileAccordion} />
             </AccordionPanel>
           </AccordionItem>
         </Accordion>
diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index 152f720b11..ef6f027770 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/src/components/UI/docs/LinksList.tsx
@@ -7,10 +7,10 @@ import { NavLink } from '../../../types';
 
 interface LinksListProps {
   links: NavLink[];
-  updateMobileAccordionState: () => void;
+  toggleMobileAccordion: () => void;
 }
 
-export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionState }) => {
+export const LinksList: FC<LinksListProps> = ({ links, toggleMobileAccordion }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -25,7 +25,7 @@ export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionStat
             _hover={{ background: 'primary', color: 'bg' }}
             data-group
           >
-            <NextLink href={to} passHref key={id} onClick={updateMobileAccordionState}>
+            <NextLink href={to} passHref key={id} onClick={toggleMobileAccordion}>
               <Link textDecoration='none !important'>
                 <Text
                   textStyle='docs-nav-links'
@@ -46,14 +46,14 @@ export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionStat
                 </Text>
               </Link>
             </NextLink>
-            {items && <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState}/>}
+            {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} updateMobileAccordionState={updateMobileAccordionState} />}
+            {items && <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion} />}
           </Stack>
         );
       })}

From fbd09362f2a0d401fe0b93d20316a9110fb07fe3 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 12 Dec 2022 20:26:54 +0100
Subject: [PATCH 4/5] add legacyBehavior prop

---
 src/components/UI/docs/LinksList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index ef6f027770..aec85947c6 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/src/components/UI/docs/LinksList.tsx
@@ -25,7 +25,7 @@ export const LinksList: FC<LinksListProps> = ({ links, toggleMobileAccordion })
             _hover={{ background: 'primary', color: 'bg' }}
             data-group
           >
-            <NextLink href={to} passHref key={id} onClick={toggleMobileAccordion}>
+            <NextLink href={to} passHref key={id} onClick={toggleMobileAccordion} legacyBehavior>
               <Link textDecoration='none !important'>
                 <Text
                   textStyle='docs-nav-links'

From 1483d10a12398737e51ebca50bcf36213c33ad64 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 12 Dec 2022 12:01:20 -0800
Subject: [PATCH 5/5] fix onClick vs legacyBehavior

adds missing legacyBehavior attribute to NextLink tags to prevent nesting anchor elements which was causing hydration warnings. Also fixes 'The legacy behavior requires onClick be set on the child of next/link'
---
 src/components/UI/docs/DocsLinks.tsx | 4 ++--
 src/components/UI/docs/LinksList.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index fefa420555..509236f7d9 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/src/components/UI/docs/DocsLinks.tsx
@@ -53,8 +53,8 @@ export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
                       _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
                     >
                       {to ? (
-                        <NextLink href={to} passHref onClick={toggleMobileAccordion}>
-                          <Link textDecoration='none !important'>
+                        <NextLink href={to} passHref legacyBehavior>
+                          <Link textDecoration='none !important' onClick={toggleMobileAccordion}>
                             <Text
                               textStyle='docs-nav-dropdown'
                               color={isActive ? 'primary' : 'unset'}
diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index aec85947c6..a86af010b4 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/src/components/UI/docs/LinksList.tsx
@@ -25,8 +25,8 @@ export const LinksList: FC<LinksListProps> = ({ links, toggleMobileAccordion })
             _hover={{ background: 'primary', color: 'bg' }}
             data-group
           >
-            <NextLink href={to} passHref key={id} onClick={toggleMobileAccordion} legacyBehavior>
-              <Link textDecoration='none !important'>
+            <NextLink href={to} passHref key={id} legacyBehavior>
+              <Link textDecoration='none !important' onClick={toggleMobileAccordion}>
                 <Text
                   textStyle='docs-nav-links'
                   color={items || isActive ? 'primary' : 'body'}