[WIP] table of contents adjustments

packages/website/ts/components/docs/sidebar/table_of_contents.tsx

@@ -18,6 +18,14 @@ export interface IContents {
 
 export const TableOfContents: React.FC<ITableOfContentsProps> = ({ contents }) => {
     console.log('contents', contents);
+    return (
+        <ContentListWrapper>
+            <Contents contents={contents} />
+        </ContentListWrapper>
+    );
+};
+
+const Contents: React.FC<ITableOfContentsProps> = ({ contents }) => {
     return (
         <ContentList>
             {contents.map(content => {
@@ -25,7 +33,7 @@ export const TableOfContents: React.FC<ITableOfContentsProps> = ({ contents }) =
                 return (
                     <li key={id}>
                         <ContentLink to={id}>{title}</ContentLink>
-                        {children.length > 0 && <TableOfContents contents={children} />}
+                        {children.length > 0 && <Contents contents={children} />}
                     </li>
                 );
             })}
@@ -33,6 +41,11 @@ export const TableOfContents: React.FC<ITableOfContentsProps> = ({ contents }) =
     );
 };
 
+const ContentListWrapper = styled.aside`
+    position: sticky;
+    top: 154px; /* To make space for the header when clicking on links */
+`;
+
 const ContentList = styled.ul`
     ul {
         border-left: 1px solid #e3e3e3;
@@ -48,6 +61,14 @@ const ContentList = styled.ul`
 const ContentLink = styled(Link)`
     display: block;
     font-size: 0.8333rem;
-    color: ${colors.textDarkSecondary};
     margin-bottom: 1rem;
+
+    span {
+        color: ${({ theme }) => theme.paragraphColor};
+        transition: color 250ms ease-in-out;
+    }
+
+    &.scroll-link-active span {
+        color: ${colors.brandDark};
+    }
 `;

packages/website/ts/pages/docs/view.tsx

@@ -74,30 +74,34 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
         <SiteWrap theme="light">
             <DocumentTitle {...documentConstants.DOCS} />
             <Hero title={title} />
-            <Section maxWidth="1130px">
-                {Component ? (
-                    <Columns>
+            {Component ? (
+                <Columns>
+                    <DocsViewWrapper>
                         <TableOfContents contents={contents} />
-                        <ContentWrapper>
-                            <MDXProvider components={mdxComponents}>
-                                {/*
+                    </DocsViewWrapper>
+                    <ContentWrapper>
+                        <MDXProvider components={mdxComponents}>
+                            {/*
                                 // @ts-ignore */}
-                                <Component />
-                            </MDXProvider>
-                            <HelpCallout />
-                            <HelpfulCta page={page} />
-                        </ContentWrapper>
-                    </Columns>
-                ) : (
-                    <LoaderWrapper>
-                        <CircularProgress size={40} thickness={2} color={colors.brandLight} />
-                    </LoaderWrapper>
-                )}
-            </Section>
+                            <Component />
+                        </MDXProvider>
+                        <HelpCallout />
+                        <HelpfulCta page={page} />
+                    </ContentWrapper>
+                </Columns>
+            ) : (
+                <LoaderWrapper>
+                    <CircularProgress size={40} thickness={2} color={colors.brandLight} />
+                </LoaderWrapper>
+            )}
         </SiteWrap>
     );
 };
 
+const DocsViewWrapper = styled.div`
+    position: relative;
+`;
+
 const LoaderWrapper = styled.div`
     display: flex;
     align-items: center;