crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styled react-scroll links in table of contents

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-15 18:26:14 +02:00
committed by fabioberger
parent dbebb3818d
commit a65f981f55
2 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/website/ts/components/docs/sidebar/table_of_contents.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react';
import styled from 'styled-components';
// import { Link } from '@0x/react-shared';
import { Link } from '@0x/react-shared';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
interface ITableOfContentsProps {
contents: IContents[];
@@ -19,33 +19,35 @@ export interface IContents {
export const TableOfContents: React.FC<ITableOfContentsProps> = ({ contents }) => {
console.log('contents', contents);
return (
<ul>
<ContentList>
{contents.map(content => {
const { children, id, title } = content;
return (
<li key={id}>
<ContentLink href={`#${id}`}>{title}</ContentLink>
<ContentLink to={id}>{title}</ContentLink>
{children.length > 0 && <TableOfContents contents={children} />}
</li>
);
})}
</ul>
</ContentList>
);
};
const ContentLink = styled.a`
display: block;
font-size: 0.8333rem;
color: ${colors.textDarkSecondary};
margin-bottom: 1rem;
& + ul {
const ContentList = styled.ul`
ul {
border-left: 1px solid #e3e3e3;
padding-left: 0.7rem;
p {
span {
font-size: 0.7222rem;
line-height: 1.45;
}
}
`;
const ContentLink = styled(Link)`
display: block;
font-size: 0.8333rem;
color: ${colors.textDarkSecondary};
margin-bottom: 1rem;
`;

34
packages/website/ts/pages/docs/view.tsx
View File

@@ -75,24 +75,24 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
<DocumentTitle {...documentConstants.DOCS} />
<Hero title={title} />
<Section maxWidth="1130px">
{Component ? (
<Columns>
<TableOfContents contents={contents} />
<ContentWrapper>
<MDXProvider components={mdxComponents}>
{/*
{Component ? (
<Columns>
<TableOfContents contents={contents} />
<ContentWrapper>
<MDXProvider components={mdxComponents}>
{/*
// @ts-ignore */}
<Component />
</MDXProvider>
<HelpCallout />
<HelpfulCta page={page} />
</ContentWrapper>
</Columns>
) : (
<LoaderWrapper>
<CircularProgress size={40} thickness={2} color={colors.brandLight} />
</LoaderWrapper>
)}
<Component />
</MDXProvider>
<HelpCallout />
<HelpfulCta page={page} />
</ContentWrapper>
</Columns>
) : (
<LoaderWrapper>
<CircularProgress size={40} thickness={2} color={colors.brandLight} />
</LoaderWrapper>
)}
</Section>
</SiteWrap>
);