NavBar

[ZacCrumpton]

USER STORY

as a user, no matter what page i'm on i should see a navbar

AC

WHEN on page load THEN I should be able to click the links AND navigate between pages

DEV NOTES

1. create a new component in shared folder.
   • this new folder should be named NavBar
   • will need js and scss file of the same name
2. use react routing for navigation
   • will need react-router-dom install
   • import { NavLink as RRNavLink } from 'react-router-dom
   • import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, }
3. additional imports:
   • import firebase, will need app and auth
   • import PropTypes
4. create a var called buildNavbar
   • needs a const for { authed } thats set to this.props;
   • needs an if statement that returns NavItem's and NavLink's
     • these will be Home, My Lists and New List
     • one of the links needs to be a logout "button" that calls the logMeOut function (see ticket #9 for more info on this function)
   • there will not be a selection for single view on lists or anime, or New Anime. these will be "hidden" pages that prompt on a button click
5. use reactstrap/boostrap to find a basic navbar structure https://reactstrap.github.io/

[ZacCrumpton]

Nav, NavItem and NavLink example for buildNavbar function

    const buildNavbar = () => {
      const { authed } = this.props;
      if (authed) {
        return (
          <Nav className="ml-auto" navbar>
          <NavItem>
            <NavLink tag={RRNavLink} to='/home'>Home</NavLink>
          </NavItem>
          <NavItem>
            <NavLink tag={RRNavLink} to='/stuff'>My Stuff</NavLink>
          </NavItem>
          <NavItem>
            <NavLink tag={RRNavLink} to='/new'>New Item</NavLink>
          </NavItem>
          <NavItem>
            <NavLink onClick={this.logMeOut}>Logout</NavLink>
          </NavItem>
        </Nav>
        );
      }

[ZacCrumpton]

Navbar and NavbarToggler example:

       <Navbar color="light" light expand="md">
          <NavbarBrand href="/">React Hoarder</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={isOpen} navbar>
            {buildNavbar()}
          </Collapse>
        </Navbar>