diff options
Diffstat (limited to 'smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx')
-rw-r--r-- | smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx | 45 |
1 files changed, 0 insertions, 45 deletions
diff --git a/smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx b/smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx deleted file mode 100644 index 578d2aa98..000000000 --- a/smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h, Fragment } from 'preact'; -import { useState, useEffect, useRef } from 'preact/hooks'; - -const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => { - const itemOffsets = useRef([]); - const [activeId, setActiveId] = useState<string>(undefined); - - useEffect(() => { - const getItemOffsets = () => { - const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)'); - itemOffsets.current = Array.from(titles).map((title) => ({ - id: title.id, - topOffset: title.getBoundingClientRect().top + window.scrollY, - })); - }; - - getItemOffsets(); - window.addEventListener('resize', getItemOffsets); - - return () => { - window.removeEventListener('resize', getItemOffsets); - }; - }, []); - - return ( - <> - <h2 class="heading">On this page</h2> - <ul> - <li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}> - <a href="#overview">Overview</a> - </li> - {headers - .filter(({ depth }) => depth > 1 && depth < 4) - .map((header) => ( - <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}> - <a href={`#${header.slug}`}>{header.text}</a> - </li> - ))} - </ul> - </> - ); -}; - -export default TableOfContents; |