fixme/src/components/FixMeNavbar/FixMeNavbar.tsx at 26a9a2f49c74ff3424d683c657c03eee3269fb03 · ossn/fixme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React from "react";
import { OutboundLink } from "react-ga";
import { FaFacebook, FaGithub, FaTwitter } from "react-icons/fa";
import { NavLink } from "react-router-dom";
import { Collapse, Nav, Navbar, NavbarToggler, NavItem } from "reactstrap";
import Logo from "./logo-fixme.svg";

export interface IFixMeNavbarState {
  readonly isOpen: boolean;
}

export default class FixMeNavbar extends React.Component<
  { white?: boolean },
  IFixMeNavbarState
> {
  public readonly state = {
    isOpen: false
  };

  public toggleNavbar = () => {
    this.setState(state => ({
      isOpen: !state.isOpen
    }));
  };
  public render() {
    const { white } = this.props;
    return (
      <div>
        <Navbar expand="md" light={white} dark={!white}>
          <NavLink className="mr-auto navbar-brand" to="/">
            <img src={Logo} className="d-inline-block align-top" alt="FixMe" />
          </NavLink>
          <NavbarToggler
            aria-label="Navigation Toggler"
            onClick={this.toggleNavbar}
          />
          <Collapse isOpen={this.state.isOpen} navbar={true}>
            <Nav className="ml-auto" navbar={true}>
              <NavItem>
                <NavLink
                  className="nav-link"
                  to="/issues"
                  data-testid="issue-link"
                >
                  Issues
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink className="nav-link" to="/projects">
                  Projects
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink className="nav-link" to="/about">
                  About
                </NavLink>
              </NavItem>

              <NavItem>
                <OutboundLink
                  aria-label="fixme's facebook"
                  className="nav-link"
                  target="_blank"
                  to="#"
                  eventLabel="Facebook on menu clicked"
                  rel="noopener noreferrer"
                >
                  <FaFacebook />
                </OutboundLink>
              </NavItem>

              <NavItem>
                <OutboundLink
                  aria-label="fixme's twitter"
                  className="nav-link"
                  target="_blank"
                  to="https://twitter.com/fixmeparser"
                  eventLabel="Twitter on menu clicked"
                  rel="noopener noreferrer"
                >
                  <FaTwitter />
                </OutboundLink>
              </NavItem>

              <NavItem>
                <OutboundLink
                  aria-label="fixme's github"
                  className="nav-link"
                  target="_blank"
                  to="https://github.com/ossn"
                  eventLabel="Github on menu clicked"
                  rel="noopener noreferrer"
                >
                  <FaGithub />
                </OutboundLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}