[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>
pull/26374/head
Corwin Smith 2 years ago committed by GitHub
parent 82a633c299
commit e60ec269ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      src/components/UI/docs/DocsLinks.tsx
  2. 22
      src/utils/checkNavLinks.ts
  3. 1
      src/utils/index.ts

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

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

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

Loading…
Cancel
Save