Add support for selected tab, see #26

react-binder/public/index.html

@@ -8,6 +8,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

react-binder/src/pages/index/index.css

@@ -1,5 +1,94 @@
 @import "../common.css";
 
+:root {
+  --side-nav-width: 290px;
+
+  --light-eggplant: #f4f2f9;
+  --gray: #6c6c6c;
+  --gray-light: #e0e0e0;
+  --pink: #e01e5a;
+
+  --short-transition: 0.3s ease;
+}
+
 #index-page {
-  text-align: center;
-}
+  width: 100%;
+  height: 100%;
+}
+
+#side-nav {
+  width: var(--side-nav-width);
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: var(--light-eggplant);
+  border-right: 1px solid var(--gray-light);
+}
+
+.title-container {
+  margin: 14px 10px;
+  padding-bottom: 4px;
+  overflow: auto;
+  border-bottom: 1px solid #dcdcdc;
+}
+
+img.title-image {
+  width: 120px;
+  display: inline-block;
+  float: left;
+}
+
+h1.title-text {
+  display: inline-block;
+  font-family: var(--default-font-family);
+  font-weight: 100;
+  font-size: 48px;
+  margin: 2px 0 0 8px;
+  float: left;
+}
+
+.nav-buttons {
+  margin-top: 20px;
+}
+
+button.nav-button {
+  width: 283px;
+  display: block;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--default-font-family);
+  font-size: 17px;
+  font-weight: 300;
+  padding: 7px 7px 6px;
+  margin: 0 8px;
+  border: 1px solid transparent;
+  color: var(--gray);
+  transition: var(--short-transition);
+}
+
+button.nav-button:hover {
+  color: var(--pink);
+  transition: var(--short-transition);
+}
+
+button.nav-button:focus {
+  color: var(--pink);
+  transition: var(--short-transition);
+  outline: none;
+}
+
+button.nav-button.selected {
+  background: white;
+  border-color: var(--gray-light);
+  border-right: none;
+}
+
+#selected-page {
+  width: calc(100% - var(--side-nav-width));
+  height: 100%;
+  position: absolute;
+  left: var(--side-nav-width);
+  top: 0;
+}

react-binder/src/pages/index/index.js

@@ -14,14 +14,55 @@ export default class IndexPage extends React.Component {
   constructor( props ) {
     super( props );
 
-    this.state = {};
+    this.state = {
+      selectedButtonId: 'simsByComponent',
+      selectedPage: <h1>sims page</h1>,
+      simsByComponent: <h1>sims page</h1>,
+      componentsBySim: <h1>components page</h1>
+    };
+  }
+
+  selectClass( buttonId ) {
+    return this.state.selectedButtonId === buttonId ? 'selected' : '';
+  }
+
+  selectPage( buttonId ) {
+    this.setState( {
+      selectedButtonId: buttonId,
+      selectedPage: this.state[ buttonId ]
+    } );
   }
 
   render() {
 
+    const NavButton = props => {
+      return <button className={`nav-button ${this.selectClass( props.id )}`}
+                     onClick={() => this.selectPage( props.id )}>
+        {props.label}
+      </button>
+    };
+
     return (
       <div id='index-page'>
-        <h1>Hello World</h1>
+
+        <div id='side-nav'>
+
+          <div className='title-container'>
+            <img src='/img/phet.png' className='title-image' alt='PhET'/>
+            <h1 className='title-text'>Binder</h1>
+          </div>
+
+          <div className='nav-buttons'>
+            <NavButton id='simsByComponent' label='SIMS BY COMPONENT'/>
+            <NavButton id='componentsBySim' label='COMPONENTS BY SIM'/>
+          </div>
+
+        </div>
+
+        <div id='selected-page'>
+          {this.state.selectedPage}
+        </div>
+
       </div>
     );
   }