diff --git a/src/components/Header.js b/src/components/Header.js index e0a9d17ccd3c3b157032e92b7358c9405b8d68da..e84ddf4c3401303828a2e11712467f1d0d9a5c0b 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -34,6 +34,11 @@ const menuItems = [ to: '/schedule', prefix: '', }, + { + text: 'Statisztika', + to: '/statistics', + prefix: '', + }, ] const FixedMenu = ({ user }) => ( diff --git a/src/components/pages/Statistics.js b/src/components/pages/Statistics.js index 3c2baaf2395b0ef0385e2489547586c34430228d..f316bd85b3340e306503e6f9b55fd4351ca70856 100644 --- a/src/components/pages/Statistics.js +++ b/src/components/pages/Statistics.js @@ -1,25 +1,27 @@ import React, { Component } from 'react'; -import { Container, Header, Segment } from 'semantic-ui-react'; +import { Container, Header, Segment, Menu } from 'semantic-ui-react'; export default class Statistics extends Component { + state = { activeItem: 'events' } + handleItemClick = (e, { name }) => this.setState({ activeItem: name }) + render() { + const { activeItem } = this.state return ( <div> - <Segment inverted textAlign='center' vertical> - <Container> - <Header - as='h1' - content='StatisztikĂĄk - Hamarosan' - inverted - style={{ - fontSize: '3em', - fontWeight: 'normal', - marginBottom: 0, - marginTop: '0.5em', - }} + <Container textAlign="center"> + <Menu tabular compact={true}> + <Menu.Item name='events' active={activeItem === 'events'} onClick={this.handleItemClick} /> + <Menu.Item + name='trainees' + active={activeItem === 'trainees'} + onClick={this.handleItemClick} /> - </Container> - </Segment> + <Segment inverted textAlign='center' vertical> + + </Segment> + </Menu> + </Container> </div> ); }