Added Top Navigation

src/App.js

@@ -1,11 +1,15 @@
 import React from 'react';
+import NavBar from './components/nav_tools/NavBar.js';
 import logo from './logo.svg';
 import './App.css';
+// src/components/nav_tools/NavBar.js
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+      <nav className="nav-bar">
+        <NavBar />
+      </nav>
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
@@ -18,9 +22,10 @@ function App() {
         >
           Learn React
         </a>
-      </header>
     </div>
   );
 }
 
 export default App;
+
+

src/components/Dashboard.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { Route, NavLink, BrowserRouter as Router} from "react-router-dom";
+// import Search from "./Search";
+// import Rental from "./Rental";
+// import RentalsList from "./RentalsList";
+// import RentalLibrary from "./RentalLibrary";
+// import CustomerList from "./CustomerList";
+
+class Dashboard extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      teacher: undefined,
+      course: undefined,
+    };
+  }
+
+  // selectCustomer = (customer) => {
+  //   this.setState({
+  //     selectedCustomer: customer,
+  //   });
+  // }
+
+  // selectMovie = (movie) => {
+  //   this.setState({ 
+  //     selectedMovie: movie
+  //   });
+  // }
+
+  // clearSelection = () => {
+  //   this.setState({
+  //     selectedCustomer: undefined,
+  //     selectedMovie: undefined,
+  //     rentalSubmitted: true,
+  //   })
+  // }
+
+  render () {
+    return (
+      // <Router>
+      //   <div className="App">
+      //       <h1>Classroom Live - Welcome, User</h1>
+      //       {/* <section><Rental movie={this.state.selectedMovie} customer={this.state.selectedCustomer} clearSelection={this.clearSelection}/></section> */}
+      //       <ul className="header">
+      //         {/* only show if course selected */}
+      //         <li><NavLink to="/live">Go Live</NavLink></li> 
+      //         {/* <li><NavLink to="/settings">Settings</NavLink></li> */}
+      //         <li><NavLink to="/logout">Logout</NavLink></li>
+      //         {/* <li><NavLink to="/video-store-consumer/rentals">Rentals</NavLink></li> */}
+      //       </ul>
+      //       <div className="content">
+      //         <Route path="/video-store-consumer/search" component={Search}/>
+      //         <Route path="/video-store-consumer/movies" render={() => <RentalLibrary selectMovie={this.selectMovie}/>}/>
+      //         <Route path="/video-store-consumer/customers" render={() => <CustomerList selectCustomer={this.selectCustomer} />}/>
+      //         <Route path="/video-store-consumer/rentals" component={RentalsList}/>
+      //       </div>
+      //     </div>
+      // </Router>
+    )
+  }
+}
+
+export default Home;

src/components/nav_tools/NavBar.css

@@ -0,0 +1,14 @@
+.nav {
+  display: grid;
+  grid-template-columns: 8fr 1fr 1fr;
+  align-items: baseline;
+}
+
+h2 {
+  text-align: left;
+  padding-left: 25px;
+}
+
+h4{
+  text-align: right;
+}

src/components/nav_tools/NavBar.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import './NavBar.css';
+
+class NavBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      user: "Katie",
+      course: 1,
+    };
+  }
+
+  render () {
+    return (
+      <nav className="nav">
+        <h2>Classroom Live - Welcome, {this.state.user}!</h2>
+        <p>Go Live</p>
+        <p>Logout</p>
+      </nav>
+    )};
+}
+
+export default NavBar;