Started sidebar on news page, added modal Add news form

src/components/Footer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 
 const Footer = () => (
-  <Segment inverted vertical textAlign='center'>
+  <Segment inverted attached={'bottom'} vertical style={{clear: 'both'}} textAlign='center'>
     <Container>
       <p textalign='center'>Created by DevTeam &copy; 2017-2018.</p>
     </Container>

src/components/pages/News.js

 import React, { Component } from 'react';
-import { Container, Header, Segment, Divider } from 'semantic-ui-react';
+import { Container, Header, Segment, Divider,
+        List, Modal, Button, Image, Form, Input, TextArea, Checkbox, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 
 import { getNews } from '../../actions';
@@ -10,11 +11,36 @@ class News extends Component {
     this.props.getNews();
   }
 
+
+  render_add_news(){
+    return (
+    <Modal trigger={<Button >Add news</Button>}>
+    <Modal.Header>Select a Photo</Modal.Header>
+    <Modal.Content image>
+    <Form>
+      <Form.Field control={Input} label='Title' placeholder='Title' />
+      <Form.Field control={TextArea} label='Text' placeholder='Tell us what you wanr...' />
+      <Form.Field control={Checkbox} label='I agree to the Terms and Conditions' />
+    </Form>
+    </Modal.Content>
+    <Modal.Actions>
+       <Button basic color='red' >
+         <Icon name='remove' /> Cancel
+       </Button>
+       <Button color='green'>
+         <Icon name='checkmark' /> Add
+       </Button>
+     </Modal.Actions>
+  </Modal>
+
+);
+  }
+
   render_news() {
     const news = this.props.news;
 
     return news.map( (item, index) => (
-      <div key={index}>
+      <div key={index} id={index}>
         { index > 0 ? <Divider /> : ''}
         <Header as='h3' style={{ fontSize: '2em' }}>{item.title}</Header>
         <p style={{ fontSize: '1.33em' }}>{item.text}</p>
@@ -23,30 +49,55 @@ class News extends Component {
 
   }
 
+  render_sidebar() {
+    const news = this.props.news;
+
+    return news.map( (item, index) => (
+        <List.Item as='a' href={`#${index}`}>
+          <List.Icon name='align justify' verticalAlign={"middle"}/>
+          <List.Content>
+            <List.Header>
+              {item.title}
+            </List.Header>
+          </List.Content>
+        </List.Item>
+    ));
+
+  }
+
   render() {
+
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
+      {/*  <Segment inverted textAlign='center' vertical>
           <Container>
             <Header
               as='h1'
               content='Hírek'
               inverted
               style={{
-                fontSize: '3em',
+                fontSize: '2em',
                 fontWeight: 'normal',
                 marginBottom: 0,
-                marginTop: '0.5em',
+                marginTop: '0.2em',
+                padding: 0
               }}
             />
           </Container>
         </Segment>
+        */}
 
-        <Segment style={{ padding: '8em 0em' }} vertical>
-          <Container text>
+        <Segment floated={'left'} style={{ padding: '3em 3em' }} vertical>
+          {this.render_add_news()}
+          <Container text textAlign = {'center'}>
             {this.render_news()}
           </Container>
         </Segment>
+        <Segment floated={'right'} style={{ padding: '1em 1em' }} vertical>
+          <List size={'big'} link divided>
+              {this.render_sidebar()}
+          </List>
+        </Segment>
       </div>
     );
   }