[website] Highlight active docs section (#26460)

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

* highlight active section

* color change

---------

Co-authored-by: Corwin Smith <cssmittys@gmail.com>
This commit is contained in:
Paul Wackerow 2023-02-13 01:13:58 -08:00 committed by GitHub
parent dee8a630d3
commit 49e65e6407
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -52,7 +52,7 @@ export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
const split = to?.split('/');
const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
const index = openSections[id] ? 0 : -1;
const isSectionActive = !!openSections[id];
return (
<Accordion key={id} index={index} allowToggle mt='0 !important'>
<AccordionItem border='none'>
@ -73,7 +73,8 @@ export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
borderRight={items ? '2px' : 'none'}
borderColor='primary'
w='100%'
bg='bg'
bg={isSectionActive ? 'secondary' : 'bg'}
color={isSectionActive ? 'body' : 'primary'}
_groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
>
{to ? (