Create navbar

amoshydra · amoshydra · commit 263d06455446 · 2016-10-10T08:26:37.000+08:00
diff --git a/views/components/Main.jsx b/views/components/Main.jsx
@@ -7,17 +7,23 @@ import Announcements from './Announcements/Container';
 export default class Main extends Component {
   constructor(props) {
     super(props);
-    console.log(props);
     this.state = {
       windowToRender: 'announcement'
     };
+
+    this.switchView = this.switchView.bind(this);
+  }
+
+  switchView(view) {
+    this.setState({ windowToRender: view });
+    console.log(view);
   }
 
   render() {
     return (
       <div>
         <div id="aSide">
-          <NavBar windowToRender={this.state.windowToRender} />
+          <NavBar switchView={this.switchView} windowToRender={this.state.windowToRender} />
         </div>
         <div id="content">
           <Announcements />
diff --git a/views/components/NavBar.jsx b/views/components/NavBar.jsx
@@ -1,13 +1,21 @@
 'use babel';
 
-import React, { PropTypes } from 'react';
-
-export default function NavBar(props) {
-  return (
-    <div>
-      This is a nav bar {props.windowToRender}
-    </div>
-  );
+import React, { Component, PropTypes } from 'react';
+import styles from './navbar.css';
+
+export default class NavBar extends Component {
+
+  render() {
+    return (
+      <div className={styles.navBar}>
+        <ul>
+          <li><button className={styles.navButton} onClick={this.props.switchView.bind(null, 'announcement')}><i className="material-icons">announcement</i></button></li>
+          <li><button className={styles.navButton} onClick={this.props.switchView.bind(null, 'webcast')}><i className="material-icons">video_library</i></button></li>
+          <li><button className={styles.navButton} onClick={this.props.switchView.bind(null, 'forum')}><i className="material-icons">forum</i></button></li>
+        </ul>
+      </div>
+    );
+  }
 }
 
 NavBar.propTypes = {
diff --git a/views/components/navbar.css b/views/components/navbar.css
@@ -0,0 +1,19 @@
+.navBar {
+  padding-top: 1.5px;
+}
+
+.navBar > ul {
+  margin: 0;
+  padding: 0;
+} .navBar > ul > li {
+  margin: 3px 0;
+  list-style: none;
+}
+
+.navButton {
+  padding: 18px 0;
+  text-align: center;
+  background-color: rgba(0,0,0,0.1);
+} .navButton > i {
+  font-size: 1.95em;
+}
diff --git a/views/index.html b/views/index.html
@@ -4,6 +4,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Notify</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i|Oxygen:700" rel="stylesheet">
     <link href="./styles/base.css" rel="stylesheet" >
     <link href="../dist/styles.css" rel="stylesheet" type="text/css">
diff --git a/views/styles/base.css b/views/styles/base.css
@@ -8,18 +8,17 @@ body {
   background-color: rgb(250, 250, 250);
 }
 
-button {
+button, input[type=button] {
   background-color: #4CAF50; /* Green */
   width: 100%;
   border: none;
   color: white;
-  padding: 15px 32px;
   text-align: left;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   cursor: pointer;
-} button:focus {
+} button:focus, input[type=button]:focus {
   outline: none;
 }
 
