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.

61 lines
1.9 KiB

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