Mark selected page in toolbar

Reviewed By: danielbuechele

Differential Revision: D6976597

fbshipit-source-id: 280623b4dbf18eb008da846077fc8f5277eccc09

website/src/components/Page.js

@@ -17,14 +17,13 @@ require('prismjs/themes/prism.css');
 
 type Props = {|
   children: any,
-  title?: string,
   className?: string,
   withSpacing?: boolean,
 |};
 
 export default (props: Props) => (
   <div className={`Page ${props.className || ''}`}>
-    <Toolbar />
+    <Toolbar/>
     <div className={`PageContent ${props.withSpacing ? 'withSpacing' : ''}`}>
       {props.children}
     </div>

website/src/components/Toolbar.css

@@ -15,6 +15,11 @@
   background-color: white;
 }
 
+.Toolbar .selected {
+  color: #8FD0C6;
+  text-decoration: underline;
+}
+
 .Toolbar .logo {
   display: flex;
   align-items: center;

website/src/components/Toolbar.js

@@ -31,8 +31,8 @@ export default class Toolbar extends Component<Props> {
           />
         </Link>
         
-        <Link to="/docs">Docs</Link>
+        <Link to="/docs" activeClassName="selected">Documentation</Link>
-        <Link to="/playground">Playground</Link>
+        <Link to="/playground" activeClassName="selected">Playground</Link>
         <a href="https://github.com/facebook/yoga">GitHub</a>
 
         {this.props.onShowCode && (

website/src/pages/playground.js

@@ -15,7 +15,7 @@ import Page from '../components/Page';
 import Playground from '../components/Playground';
 
 export default () => (
-  <Page title="Playground">
+  <Page>
     <Playground height="100%" selectedNodePath={[]} persist />
   </Page>
 );