summaryrefslogtreecommitdiff
path: root/examples/docs/src/components/DocSidebar.tsx
diff options
context:
space:
mode:
authorGravatar Okiki <okikio.dev@gmail.com> 2021-08-14 00:58:00 +0000
committerGravatar Fred K. Schott <fkschott@gmail.com> 2021-08-26 12:15:33 -0700
commitb7ada11ddbabe4dd2f0798e140e5b280de4d6952 (patch)
treec01ff3eee4f770fc108c19d126dce31d9cbe5e51 /examples/docs/src/components/DocSidebar.tsx
parent59cc62f7bd53dbcb6ad8051fa501b7b797614178 (diff)
downloadastro-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.tsx61
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;