From b72b9948471c188b123079601133f6a03ae8b909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Sat, 29 Dec 2018 17:56:14 +0100
Subject: [PATCH] Add Statistics manu item to header, start statistics page
with a tabular menu
---
src/components/Header.js | 5 +++++
src/components/pages/Statistics.js | 32 ++++++++++++++++--------------
2 files changed, 22 insertions(+), 15 deletions(-)
diff --git a/src/components/Header.js b/src/components/Header.js
index e0a9d17..e84ddf4 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 3c2baaf..f316bd8 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>
);
}
--
GitLab