You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
1.9 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. /* eslint react/prop-types: 0 */
  2. import React, { Component } from "react";
  3. import { Collapse, Navbar, NavbarToggler, Nav, NavItem } from "reactstrap";
  4. import { Link } from "react-router-dom";
  5. import { withTranslation } from "react-i18next";
  6. import logo from "../../logos/logo-color.svg";
  7. import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  8. import { faRocket } from "@fortawesome/free-solid-svg-icons";
  9. import LanguageSelector from "./LanguageSelector";
  10. class Header extends Component {
  11. state = {
  12. isOpen: false
  13. };
  14. toggle = () => {
  15. this.setState({
  16. isOpen: !this.state.isOpen
  17. });
  18. };
  19. render() {
  20. const { t } = this.props;
  21. return (
  22. <header>
  23. <Navbar color="light" light expand="md">
  24. <Link to="/" className="navbar-brand">
  25. <div className="d-flex flex-row">
  26. <div className="align-self-center">
  27. <img src={logo} alt="logo" height="32" />
  28. </div>
  29. <div className="align-self-center ml-2">
  30. <div className="logo-text">
  31. <h1>
  32. {t("Voting platform")}
  33. <small>{t("Majority Judgment")}</small>
  34. </h1>
  35. </div>
  36. </div>
  37. </div>
  38. </Link>
  39. <NavbarToggler onClick={this.toggle} />
  40. <Collapse isOpen={this.state.isOpen} navbar>
  41. <Nav className="ml-auto" navbar>
  42. <NavItem>
  43. <Link className="text-primary nav-link" to="/create-election/">
  44. <FontAwesomeIcon icon={faRocket} className="mr-2" />
  45. {t("Start an election")}
  46. </Link>
  47. </NavItem>
  48. <NavItem style={{ width: "150px" }}>
  49. <LanguageSelector />
  50. </NavItem>
  51. </Nav>
  52. </Collapse>
  53. </Navbar>
  54. </header>
  55. );
  56. }
  57. }
  58. export default withTranslation()(Header);