diff --git a/apps/web/screens/Manual/ManualChapter.tsx b/apps/web/screens/Manual/ManualChapter.tsx index 5ac904a3038a..3f53ed25a52a 100644 --- a/apps/web/screens/Manual/ManualChapter.tsx +++ b/apps/web/screens/Manual/ManualChapter.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useRef } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import { useQueryState } from 'next-usequerystate' import { BLOCKS } from '@contentful/rich-text-types' @@ -75,6 +75,9 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => { const { activeLocale } = useI18n() const [selectedItemId, setSelectedItemId] = useQueryState('selectedItemId') + const [expandedItemIds, setExpandedItemIds] = useState( + selectedItemId ? [selectedItemId] : [], + ) const initialScrollHasHappened = useRef(false) useLocalLinkTypeResolver() @@ -174,13 +177,29 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => { key={item.id} id={item.id} label={item.title} - expanded={item.id === selectedItemId} + expanded={ + expandedItemIds.includes(item.id) || + item.id === selectedItemId + } onToggle={(expanded) => { initialScrollHasHappened.current = true if (expanded) { + setExpandedItemIds((prev) => prev.concat(item.id)) setSelectedItemId(item.id) - } else if (selectedItemId === item.id) { - setSelectedItemId(null) + } else { + setExpandedItemIds((prev) => { + const updatedExpandedItemIds = prev.filter( + (id) => id !== item.id, + ) + if (selectedItemId === item.id) { + setSelectedItemId( + updatedExpandedItemIds[ + updatedExpandedItemIds.length - 1 + ] ?? null, + ) + } + return updatedExpandedItemIds + }) } }} >