diff --git a/components/toggle-panel/togglePanel.jsx b/components/toggle-panel/togglePanel.jsx index 64366d12..d947d285 100644 --- a/components/toggle-panel/togglePanel.jsx +++ b/components/toggle-panel/togglePanel.jsx @@ -1,9 +1,11 @@ -import React, { useRef, useState } from 'react' +import React, { useRef, useState, useEffect } from 'react' +import { useRouter } from 'next/router' import styles from './styles.module.scss' -const TogglePanel = ({ className, title, content }) => { +const TogglePanel = ({ className, title, content, sectionId }) => { const [isOpen, setIsOpen] = useState(false) + const router = useRouter() const contentRef = useRef(null) @@ -17,6 +19,23 @@ const TogglePanel = ({ className, title, content }) => { setIsOpen((prev) => !prev) } + useEffect(() => { + if ( + router.asPath.includes('ai-ml-papers') && + sectionId === 'ai-ml-papers' + ) { + setIsOpen(true) + setTimeout(() => { + contentRef.current?.scrollIntoView({ + behavior: 'smooth', + block: 'start', + inline: 'nearest', + }) + window.scrollBy(0, -60) + }, 0) + } else setIsOpen(false) + }, [router.asPath]) + return ( // eslint-disable-next-line max-len // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions diff --git a/data/home.yml b/data/home.yml index c188c1cf..c2c36ed1 100644 --- a/data/home.yml +++ b/data/home.yml @@ -43,7 +43,7 @@ features: picture: /images/features/building.svg url: /services - title: Cutting-edge solutions - description: We [research](~about/research-outputs) and develop innovative data-driven and [AI solutions](~governance/research) + description: We [research](~about/research-outputs) and develop innovative data-driven and [AI solutions](~about/research-outputs/#ai-ml-papers) picture: /images/features/neural.svg url: /governance/supporters diff --git a/pages/about/research-outputs.jsx b/pages/about/research-outputs.jsx index 88e02198..bb679e2c 100644 --- a/pages/about/research-outputs.jsx +++ b/pages/about/research-outputs.jsx @@ -123,6 +123,7 @@ const ResearchOutputsSection = ({ id={title} title={title} key={title} + sectionId={id} className={styles.toggler} content={papers.map((paper) => (