NavBar.jsx 1.43 KB
Newer Older
1
import React, { useState } from "react";
2 3 4 5 6 7 8 9 10 11
import {
  Container,
  Navbar,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  NavbarToggler,
  Collapse
} from "reactstrap";
12
import { AuthButton } from "../";
Zach Osman's avatar
Zach Osman committed
13

14 15 16
const NavBar = props => {
  const [collapsed, setCollapsed] = useState(true);
  const { pathname } = props.location;
Zach Osman's avatar
Zach Osman committed
17

18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
  return (
    <Navbar dark color="dark" expand="md">
      <Container>
        <NavbarBrand href="#/">
          <img
            src="static/go.svg"
            className="d-inline-block align-top"
            width="42"
            height="42"
            alt="SRCT Go"
          />
        </NavbarBrand>
        <NavbarToggler
          onClick={() => setCollapsed(!collapsed)}
          className="ml-auto"
        />
        <Collapse isOpen={!collapsed} navbar>
          <Nav className="mx-auto" navbar>
            <NavItem>
David Haynes's avatar
David Haynes committed
37 38
              <NavLink href="#/new" active={pathname == "/new"}>
                New Link
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#/about" active={pathname == "/about"}>
                About
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#/debug" active={pathname == "/debug"}>
                Debug
              </NavLink>
            </NavItem>
          </Nav>
          <AuthButton className="ml-auto" />
        </Collapse>
      </Container>
    </Navbar>
  );
};
David Haynes's avatar
David Haynes committed
58 59

export default NavBar;