Add initial nav menu, 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,80 @@
 @import "../common.css";
 
+:root {
+  --side-nav-width: 290px;
+
+  --light-eggplant: #f9f8fb;
+  --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);
+}
+
+#sub-page {
+  width: calc(100% - var(--side-nav-width));
+  height: 100%;
+  position: absolute;
+  left: var(--side-nav-width);
+  top: 0;
+}
+
+.title-container {
+  margin: 14px 10px;
+  padding-bottom: 4px;
+  overflow: auto;
+  border-bottom: 1px solid var(--gray-light);
+}
+
+img.title-image {
+  width: 120px;
+  display: inline-block;
+  float: left;
+}
+
+h1.title-text {
+  display: inline-block;
+  font-family: var(--default-font-family);
+  font-weight: 300;
+  font-size: 46px;
+  margin: 3px 0 0 8px;
+  float: left;
+}
+
+.nav-buttons {
+  margin-top: 20px;
+}
+
+button.nav-button {
+  display: block;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--default-font-family);
+  font-size: 18px;
+  font-weight: 300;
+  padding: 4px 5px;
+  margin: 0 5px;
+  color: var(--gray);
+  transition: var(--short-transition);
+}
+
+button.nav-button:hover {
+  color: var(--pink);
+  transition: var(--short-transition);
 }

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

@@ -14,14 +14,40 @@ export default class IndexPage extends React.Component {
   constructor( props ) {
     super( props );
 
-    this.state = {};
+    this.state = {
+      currentPage: <h1></h1>,
+      simsPage: <h1>sims page</h1>,
+      componentsPage: <h1>components page</h1>
+    };
+  }
+
+  loadPage( pageToLoad ) {
+    this.setState( {
+      currentPage: pageToLoad
+    } );
   }
 
   render() {
 
     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'>
+            <button className='nav-button' onClick={() => this.loadPage( this.state.simsPage )}>
+              SIMS BY COMPONENT
+            </button>
+            <button className='nav-button' onClick={() => this.loadPage( this.state.componentsPage )}>
+              COMPONENTS BY SIM
+            </button>
+          </div>
+        </div>
+        <div id='sub-page'>
+          {this.state.currentPage}
+        </div>
       </div>
     );
   }