WIP: Added simple table of contents.

lovelybooks · Nov 12, 2015 · bb024de · bb024de
1 parent 1cc84fb
commit bb024de
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/Layout/Layout.css b/src/components/Layout/Layout.css
@@ -10,3 +10,7 @@
 	font-size: 3rem;
 	font-weight: normal;
 }
+
+.tableOfContents {
+	/* TODO some box with position: fixed */
+}
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -18,6 +18,11 @@ export default class Layout extends Component {
 		return (
 			<div className={s.root}>
 				<h1 className={s.heading}>{title}</h1>
+				<ul className={s.tableOfContents}>
+					{components.map(component => (
+						<li><a href={'#' + component.name}>{component.name}</a></li>
+					))}
+				</ul>
 				<div>
 					<Components highlightTheme={highlightTheme} components={components}/>
 				</div>

diff --git a/src/components/ReactComponent/ReactComponent.js b/src/components/ReactComponent/ReactComponent.js
@@ -44,8 +44,8 @@ export default class ReactComponent extends Component {
 	render() {
 		let { component } = this.props;
 		return (
-			<div className={s.root}>
-				<h2 className={s.heading}>{component.name}</h2>
+			<div className={s.root} id={component.name}>
+				<h2 className={s.heading}><a href={'#' + component.name}>{component.name}</a></h2>
 				<div className={s.sourcePath}>{component.relativePath}</div>
 				{this.renderDescription()}
 				<Props props={component.props}/>