import React, { Component } from "react"; import { Menu, Icon } from "semantic-ui-react"; import { Redirect } from "react-router-dom"; import AdaBotHead from "../assets/AdaBotHead.png"; const ACTIVE_ITEM_PATHS = { home: "/", candidates: "/candidates", results: "results" }; class Header extends Component { constructor() { super(); this.state = { activeItem: undefined, activeItemPath: "", redirect: false }; } handleItemClick = (e, { name }) => { this.setState({ activeItem: name, activeItemPath: ACTIVE_ITEM_PATHS[name], redirect: true }); }; render() { const { activeItem, redirect, activeItemPath } = this.state; if (redirect) { this.setState({ redirect: false }); return <Redirect to={activeItemPath} />; } return ( <Menu size="massive" stackable inverted> <Menu.Item href="https://adasteam.ca/" target="_blank"> <img src={AdaBotHead} alt="Ada's Bot Head" /> </Menu.Item> <Menu.Item name="home" active={activeItem === "home"} onClick={this.handleItemClick} > Home </Menu.Item> <Menu.Item name="candidates" active={activeItem === "candidates"} onClick={this.handleItemClick} > Candidates </Menu.Item> <Menu.Item name="results" active={activeItem === "results"} onClick={this.handleItemClick} > Results </Menu.Item> <Menu.Item position="right" href="https://github.com/adas-team/ElectionsApp" target="_blank" > {/* <img src={AdaBotHead} alt="Ada's Bot Head" /> */} <Icon name="github" size="large" /> </Menu.Item> </Menu> ); } } export default Header;