[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

@@ -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 }) => (
                 <>

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;
+};

src/utils/index.ts

@@ -1,3 +1,4 @@
+export { checkNavLinks } from './checkNavLinks';
 export { compareReleasesFn } from './compareReleasesFn';
 export { fetchLatestReleaseCommit } from './fetchLatestReleaseCommit';
 export { fetchLatestReleaseVersionAndName } from './fetchLatestReleaseVersionAndName';