diff options
author | 2021-08-14 00:58:00 +0000 | |
---|---|---|
committer | 2021-08-26 12:15:33 -0700 | |
commit | b7ada11ddbabe4dd2f0798e140e5b280de4d6952 (patch) | |
tree | c01ff3eee4f770fc108c19d126dce31d9cbe5e51 /examples/docs/src/components/DocSidebar.tsx | |
parent | 59cc62f7bd53dbcb6ad8051fa501b7b797614178 (diff) | |
download | astro-b7ada11ddbabe4dd2f0798e140e5b280de4d6952.tar.gz astro-b7ada11ddbabe4dd2f0798e140e5b280de4d6952.tar.zst astro-b7ada11ddbabe4dd2f0798e140e5b280de4d6952.zip |
WIP update examples/docs/
Diffstat (limited to 'examples/docs/src/components/DocSidebar.tsx')
-rw-r--r-- | examples/docs/src/components/DocSidebar.tsx | 61 |
1 files changed, 0 insertions, 61 deletions
diff --git a/examples/docs/src/components/DocSidebar.tsx b/examples/docs/src/components/DocSidebar.tsx deleted file mode 100644 index 076d460cc..000000000 --- a/examples/docs/src/components/DocSidebar.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import { useState, useEffect, useRef } from 'preact/hooks'; -import EditOnGithub from './EditOnGithub'; - -const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ headers = [], editHref }) => { - const itemOffsets = useRef([]); - const [activeId, setActiveId] = useState<string>(undefined); - - useEffect(() => { - const getItemOffsets = () => { - const titles = document.querySelectorAll('article :is(h2, h3, h4)'); - itemOffsets.current = Array.from(titles).map((title) => ({ - id: title.id, - topOffset: title.getBoundingClientRect().top + window.scrollY, - })); - }; - - const onScroll = () => { - const itemIndex = itemOffsets.current.findIndex((item) => item.topOffset > window.scrollY + window.innerHeight / 3); - if (itemIndex === 0) { - setActiveId(undefined); - } else if (itemIndex === -1) { - setActiveId(itemOffsets.current[itemOffsets.current.length - 1].id); - } else { - setActiveId(itemOffsets.current[itemIndex - 1].id); - } - }; - - getItemOffsets(); - window.addEventListener('resize', getItemOffsets); - window.addEventListener('scroll', onScroll); - - return () => { - window.removeEventListener('resize', getItemOffsets); - window.removeEventListener('scroll', onScroll); - }; - }, []); - - return ( - <nav> - <div> - <h4>Contents</h4> - <ul> - {headers - .filter(({ depth }) => depth > 1 && depth < 5) - .map((header) => ( - <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}> - <a href={`#${header.slug}`}>{header.text}</a> - </li> - ))} - </ul> - </div> - <div> - <EditOnGithub href={editHref} /> - </div> - </nav> - ); -}; - -export default DocSidebar; |