Use accessible indentation (#2253)

1 files changed, 33 insertions, 33 deletions

diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
index d8ea998d4..578d2aa98 100644
--- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx
+++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
@@ -3,43 +3,43 @@ 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);
+	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,
-      }));
-    };
+	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);
+		getItemOffsets();
+		window.addEventListener('resize', getItemOffsets);
 
-    return () => {
-      window.removeEventListener('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>
-    </>
-  );
+	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;