Merge pull request #281 from topcoder-platform/dev-center

Dev center final fix as per the beta test feedback

Author: brooketopcoder

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownDoc.module.scss

@@ -16,7 +16,7 @@
         @include font-weight-normal;
         font-size: 14px;
         line-height: 18px;
-        color: $purple-120;
+        color: $silver-2;
 
         word-break: break-word;
     }

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.tsx

@@ -14,9 +14,11 @@ export const TableOfContents: React.FC<TableOfContentsProps> = (props) => {
     ] = React.useState(-1)
     const { toc }: { toc: TOC } = props
     const items: TOC = React.useMemo(() => {
-        return toc.filter((item) => (item.level === 2 || item.level === 3))
+        return toc.filter((item) => item.level === 2 || item.level === 3)
     }, [toc])
 
+    const navRef: React.RefObject<HTMLElement> = React.createRef<HTMLElement>()
+
     const findActiveIndex: () => void = React.useCallback(() => {
         for (let i: number = 0; i < items.length; i++) {
             const h: HTMLElement | null = document.getElementById(
@@ -29,27 +31,40 @@ export const TableOfContents: React.FC<TableOfContentsProps> = (props) => {
                         document.documentElement.clientHeight / 2
             ) {
                 setActiveIndex(i)
+                const liNodes: NodeListOf<HTMLLIElement> | undefined =
+                    navRef.current?.querySelectorAll('li')
+                if (navRef.current && liNodes) {
+                    navRef.current.scrollTop =
+                        liNodes[i].offsetTop >
+                        document.documentElement.clientHeight - 100
+                            ? liNodes[liNodes.length - 1].offsetTop
+                            : 0
+                }
             }
         }
-    }, [items])
+    }, [items, navRef])
 
     useOnScroll({ onScroll: findActiveIndex })
 
     return (
-        <nav className={styles['nav']}>
+        <nav ref={navRef} className={styles['nav']}>
             <div className={styles['navLabel']}>ON THIS PAGE</div>
             {items.length > 0 ? (
                 <ul>
                     {items.map((item, index) => (
                         <li
-                            key={item.title}
+                            key={`${item.title}-${index}`}
                             className={`${styles['navListItem']} ${
                                 index === activeIndex ? styles['active'] : ''
                             }`}
                         >
                             <a
                                 href={`#${item.headingId}`}
-                                className={`${styles['navListItem-link']} ${styles[`navListItem-link-padding-level${item.level}`]}`}
+                                className={`${styles['navListItem-link']} ${
+                                    styles[
+                                        `navListItem-link-padding-level${item.level}`
+                                    ]
+                                }`}
                             >
                                 {item.title}
                             </a>