From 6c90d3767235bf76417dd39c9a8e1e9ce30dfda7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 28 Jan 2019 11:59:40 +0100
Subject: [PATCH] scrollspy for sub items

---
 src/templates/Typedoc/Entities.jsx | 22 +++++------
 src/templates/Typedoc/Toc.jsx      | 59 ++++++++++++------------------
 2 files changed, 33 insertions(+), 48 deletions(-)

diff --git a/src/templates/Typedoc/Entities.jsx b/src/templates/Typedoc/Entities.jsx
index 11dbd5a7..451dc206 100644
--- a/src/templates/Typedoc/Entities.jsx
+++ b/src/templates/Typedoc/Entities.jsx
@@ -173,9 +173,7 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 <div className={styles.deprecation}>
                     <strong>Deprecated</strong>: use{' '}
                     <code>
-                        <a href={`#${deprecatedSlug}`}>
-                            {deprecatedUse}
-                        </a>
+                        <a href={`#${deprecatedSlug}`}>{deprecatedUse}</a>
                     </code>{' '}
                     instead
                 </div>
@@ -224,16 +222,14 @@ const Entities = ({ entities, sourceUrl }) =>
                 </div>
             )}
 
-            {children
-                .filter(filterByKindOfProperty)
-                .map(property => (
-                    <PropertyWrapper
-                        key={`${name}/${property.id}`}
-                        property={property}
-                        sourceUrl={sourceUrl}
-                        parentAnchor={slugify(name)}
-                    />
-                ))}
+            {children.filter(filterByKindOfProperty).map(property => (
+                <PropertyWrapper
+                    key={`${name}/${property.id}`}
+                    property={property}
+                    sourceUrl={sourceUrl}
+                    parentAnchor={slugify(name)}
+                />
+            ))}
         </div>
     ))
 
diff --git a/src/templates/Typedoc/Toc.jsx b/src/templates/Typedoc/Toc.jsx
index fdd2c47a..43f0d25f 100644
--- a/src/templates/Typedoc/Toc.jsx
+++ b/src/templates/Typedoc/Toc.jsx
@@ -6,55 +6,44 @@ import stylesSidebar from '../../components/Sidebar.module.scss'
 
 const Toc = ({ data }) => {
     const subItems = (children, parentName) =>
-        children.map(({ name }) => {
-            return (
-                <li key={name}>
-                    <a href={`#${parentName}-${slugify(name)}`}>
-                        <code>{name}</code>
-                    </a>
-                </li>
-            )
-        })
+        children.map(({ name }) => (
+            <li key={name}>
+                <a href={`#${parentName}-${slugify(name)}`}>
+                    <code>{name}</code>
+                </a>
+            </li>
+        ))
 
     const items = data.map(({ name, children }) => {
-        // let subIds = []
+        let subIds = []
+        const parentName = name
 
-        // subIds.push(
-        //     data.map(({ name, children }) => {
-        //         const parentName = name
-        //         let childId
-
-        //         children.map(({ name }) => {
-        //             childId = `${parentName}-${slugify(name)}`
-        //         })
-
-        //         return childId
-        //     })
-        // )
-
-        // console.log(subIds)
+        subIds.push(
+            children.map(({ name }) => {
+                return `${parentName}-${slugify(name)}`
+            })
+        )
 
         return (
             <li key={name}>
                 <a href={`#${slugify(name)}`}>
                     <code>{name}</code>
                 </a>
-                <ul>{subItems(children, name)}</ul>
+                <Scrollspy
+                    items={subIds[0]}
+                    currentClassName={stylesSidebar.scrollspyActive}
+                    offset={-200}
+                >
+                    {subItems(children, name)}
+                </Scrollspy>
             </li>
         )
     })
 
-    let Ids = []
-    Ids.push(data.map(({ name }) => slugify(name)))
+    // let Ids = []
+    // Ids.push(data.map(({ name }) => slugify(name)))
 
-    return (
-        <Scrollspy
-            items={Ids[0]}
-            currentClassName={stylesSidebar.scrollspyActive}
-        >
-            {items}
-        </Scrollspy>
-    )
+    return <ul>{items}</ul>
 }
 
 Toc.propTypes = {