NavBar

[aleshakay]

UserStory

As a user, I would like to see a navbar with the options to click on other pages on the website.

AC

WHEN I am on the homepage I should see Portfolio, Schedule, Events, and About US across the top of the screen in the middle THEN I should be able to click on each of the links on the navbar

DevNotes

• [x] Create a NavBar component in shared
• [x] Import React, the Navbar.scss file, firebase, Link, and PropTypes
• [x] include the auth in propTypes

  static propTypes = {
  authed: PropTypes.bool,
  }

• [x] create a func for logMeOut

 logMeOut = (e) => {
    e.preventDefault();
    firebase.auth().signOut();
  } 

• [x] build the navbar in render using buildNaveBar function

• Link for the nav-items

  const { authed } = this.props;
  const buildNavBar = () => {
    if (authed) {
      return (
        <ul className="navbar-nav ml-auto">
           <li className="nav-item">
            <Link className="nav-link" to="/event/:eventID">Pictures</Link>
          </li>
          <li className="nav-item">
            <Link className="nav-Link" to="/event/New">Schedule</Link>
          </li>
          <li className="nav-item">
            <Link className="nav-Link" to="/aboutus">AboutUs</Link>
          </li>
          <li className="nav-item">
            <button className="btn btn-danger" onClick={this.logMeOut}>Log Me Out</button>
          </li>
        </ul>
      );
    }
    return (<ul className="navbar-nav ml-auto"></ul>);
  };
  return (
    <div className="Navbar">
  <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
  <Link className="navbar-brand" to="/"><picture></Link>
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>
  <div className="collapse navbar-collapse" id="navbarSupportedContent">
    { buildNavBar() }
  </div>
  </nav>
  </div>

• [x] export NavBar

• [x] import NavBar in App.js

• [x] add <NavBar authed={authed}/> to the return in App after

[aleshakay]

Used reactbootstrap, and router is the next ticket... Did this ticket in connection with Router