MyNavbar

[emilykdewitt]

User Story

As a user, I want to see a navbar at the top of the application that allows me to logout or select different components that I would like to view (My Profile, My Activities, Community).

Development

1. Use example below to create a NavBar.
2. Add reactstrap navbar that has the GreenUp Logo
3. Inside the render, create a buildNavbar function that creates the items to be displayed in the navbar based on the 'authed' value
4. If authed, the NavItems in the navbar should be 'home', 'my activities', 'all activities', and 'scoreboards' and should contain NavLinks to /home, /myactivities, /activities, and /scoreboards
5. If not authed, there should be a navbar with only the logo on the far left side.

[emilykdewitt]

import firebase from 'firebase/app';
import 'firebase/auth';

import React from 'react';
import { NavLink as RRNavLink } from 'react-router-dom';
import PropTypes from 'prop-types';

import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';

class MyNavbar extends React.Component {
  static propTypes = {
    authed: PropTypes.bool.isRequired,
  }

state= {
  isOpen: false,
}

toggle() {
  this.setState({ isOpen: !this.state.isOpen });
}

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

render() {
  const { authed } = this.props;
  const buildNavbar = () => {
    if (authed) {
      return (
        <Nav className="ml-auto" navbar>
        <NavItem>
          <NavLink tag={RRNavLink} to='/home'>Home</NavLink>
        </NavItem>
        <NavItem>
          <NavLink tag={RRNavLink} to='/new' href="https://github.com/reactstrap/reactstrap">New Scat</NavLink>
        </NavItem>
        <NavItem>
          <NavLink onClick={this.logMeOut}>Logout</NavLink>
        </NavItem>
      </Nav>
      );
    }
    return (
      <Nav className="ml-auto" navbar />
    );
  };
  return (
    <div className="MyNavbar">
      <Navbar color="dark" dark expand="md">
          <NavbarBrand href="/">Scat Surprise</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            {buildNavbar()}
          </Collapse>
        </Navbar>
    </div>
  );
}
}

export default MyNavbar;