From e60ec269ba5ce33aab9dad288fcf4e6ea1c76fe6 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Mon, 19 Dec 2022 12:11:31 -0700
Subject: [PATCH] [UX SUGGESTION] Active section should be expanded on docs
 page load (#190)

* Add functionality to have left navbar section open on page load

* remove tracker as prop

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/UI/docs/DocsLinks.tsx |  8 +++++---
 src/utils/checkNavLinks.ts           | 22 ++++++++++++++++++++++
 src/utils/index.ts                   |  1 +
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/checkNavLinks.ts

diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index 509236f7d9..b3c5aa96a9 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/src/components/UI/docs/DocsLinks.tsx
@@ -16,6 +16,7 @@ import { useRouter } from 'next/router';
 import { LinksList } from './';
 
 import { NavLink } from '../../../types';
+import { checkNavLinks } from '../../../utils';
 
 interface Props {
   navLinks: NavLink[];
@@ -23,15 +24,16 @@ interface Props {
 }
 
 export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
-  const router = useRouter();
-  const { slug } = router.query;
+  const { asPath, query: { slug } }  = useRouter();
   return (
     <Stack border='2px' borderColor='primary'>
       {navLinks.map(({ id, to, items }, idx) => {
         const split = to?.split('/');
         const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
+        const isSectionActive = checkNavLinks({ to, items, pathCheck: asPath.split('#')[0] })
+
         return (
-          <Accordion key={id} allowToggle mt='0 !important'>
+          <Accordion key={id} defaultIndex={isSectionActive ? 0 : -1} allowToggle mt='0 !important'>
             <AccordionItem border='none'>
               {({ isExpanded }) => (
                 <>
diff --git a/src/utils/checkNavLinks.ts b/src/utils/checkNavLinks.ts
new file mode 100644
index 0000000000..7aae44b463
--- /dev/null
+++ b/src/utils/checkNavLinks.ts
@@ -0,0 +1,22 @@
+import { NavLink } from '../types';
+
+interface Props {
+  to?: string;
+  items?: NavLink[];
+  pathCheck: string;
+}
+export const checkNavLinks = ({ to, items, pathCheck }: Props): boolean => {
+  let tracker = false;
+
+  if (to === pathCheck) {
+    tracker = true;
+  }
+
+  items?.forEach(({ to, items }) => {
+    if (checkNavLinks({ to, items, pathCheck })) {
+      tracker = true;
+    }
+  });
+
+  return tracker;
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1616b13b8d..4133683a06 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,4 @@
+export { checkNavLinks } from './checkNavLinks';
 export { compareReleasesFn } from './compareReleasesFn';
 export { fetchLatestReleaseCommit } from './fetchLatestReleaseCommit';
 export { fetchLatestReleaseVersionAndName } from './fetchLatestReleaseVersionAndName';