Design improvements + Multiple updates

README.md

@@ -4,6 +4,8 @@ A ready to go React js boilerplate, backed by latest techs and tools to get your
 
 Check out our website at [Qdev](https://facebook.github.io/react/) and our code marketplace at [Alkanyx](https://facebook.github.io/react/) for more cool stuff.
 
+You can also check out the official page of the boilerplate [Here](https://qdev.tech/react-big-bang/)
+
 ### Getting started
 
 #### Installation and development mode

package.json

@@ -13,6 +13,7 @@
     "open:build": "babel-node tools/distServer.js",
     "lint": "esw webpack.config.* src tools --color",
     "lint:watch": "npm run lint -- --watch",
+    "open:dist": "babel-node tools/distServer.js",
     "clean-dist": "npm run remove-dist && mkdir dist",
     "remove-dist": "rimraf ./dist",
     "prebuild": "npm run lint && npm run test && npm run clean-dist",

src/Components/App.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Container  } from 'semantic-ui-react'
 import AppNavigation from "../Navigation/Routes";
+import Footer from "./Footer";
+import MainMenu from "./MainMenu";
 
 class App extends Component {
 
@@ -11,19 +11,10 @@ class App extends Component {
 
   render() {
     return (
-      <div>
-        <div className="ui menu">
-          <Container>
-          <div className="header item">
-            React Big BANG
-          </div>
-            <Link className={this.props.history.location.pathname == '/' ? "item active" : "item"} to="/">Home</Link>
-            <Link className={this.props.history.location.pathname == '/example' ? "item active" : "item"} to="/example">API Example</Link>
-          </Container>
-        </div>
-        <Container >
+      <div >
+        <MainMenu history={this.props.history}/>
         <AppNavigation/>
-        </Container>
+        <Footer/>
       </div>
     );
   }

src/Components/Footer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {Container, Grid, Icon} from "semantic-ui-react";
+
+const Footer = () => {
+  return (
+    <div className="footer ui inverted">
+      <Container>
+        <Grid columns={3} divided>
+          <Grid.Column>
+            <h4>About</h4>
+            <p>React Big Bang - Ready to go React.js starter kit. </p>
+            <p>Made with love by <a href="https://qwebdev.eu/" target="_blank"  rel="noopener noreferrer">Qdev Techs</a> © 2018.</p>
+          </Grid.Column>
+          <Grid.Column>
+            <h4>Services</h4>
+            <ul>
+              <li><Link to="home">Home</Link></li>
+              <li><Link  to="documentation">Documentation</Link></li>
+              <li><Link  to="example">API Example</Link></li>
+            </ul>
+          </Grid.Column>
+          <Grid.Column className="social">
+            <h4>Follow us on social media</h4>
+            <a href="https://www.facebook.com/qwebdev/" target="_blank"  rel="noopener noreferrer"><Icon name="facebook" size='big'/></a>
+            <a href="https://twitter.com/Qwebdev" target="_blank"  rel="noopener noreferrer"><Icon name="twitter" size='big'/></a>
+            <a href="https://www.instagram.com/q.dev/" target="_blank"  rel="noopener noreferrer"><Icon name="instagram" size='big'/></a>
+            <a href="https://www.linkedin.com/company/qdev" target="_blank"  rel="noopener noreferrer"><Icon name="linkedin" size='big'/></a>
+          </Grid.Column>
+        </Grid>
+      </Container>
+    </div>
+  );
+};
+
+export default Footer;

src/Components/MainMenu.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {Button, Container, Icon, Menu} from "semantic-ui-react";
+
+import PropTypes from 'prop-types';
+
+const MainMenu = (props) => {
+
+  return (
+    <div className="homeNavBarContainer">
+      <Container>
+        <Menu size='huge' inverted className="homeNavBar">
+          <Link className={props.history.location.pathname == '/' || props.history.location.pathname == '/home'  ? "item active" : "item"} to="/home">Home</Link>
+          <Link className={props.history.location.pathname == '/documentation' ? "item active" : "item"} to="documentation">Documentation</Link>
+          <Link className={props.history.location.pathname == '/example' ? "item active" : "item"} to="example">API Example</Link>
+          <Menu.Menu position='right'>
+            <Menu.Item>
+              <a href="https://alkanyx.com/" target="_blank"  rel="noopener noreferrer">
+                <Button inverted color='green' style={{display:'inline-block'}} size='large'>Alkanyx</Button>
+              </a>
+            </Menu.Item>
+            <Menu.Item>
+              <a href="https://github.com/theqdev/react-big-bang" target="_blank"  rel="noopener noreferrer">
+                <Button inverted color='blue' size='large'><Icon name="github"></Icon>Github</Button>
+              </a>
+            </Menu.Item>
+          </Menu.Menu>
+        </Menu>
+      </Container>
+    </div>
+  );
+};
+
+MainMenu.propTypes = {
+  history : PropTypes.object,
+};
+
+export default MainMenu;

src/Components/Root.js

@@ -10,9 +10,7 @@ export default class Root extends Component {
     return (
       <Provider store={store}>
         <ConnectedRouter history={history}>
-
           <App history={history}/>
-
         </ConnectedRouter>
       </Provider>
     );

src/Containers/Docs.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import {Container, Label} from 'semantic-ui-react'
+
+class Docs extends Component {
+
+  componentDidMount(){
+  }
+
+  componentDidUpdate(){
+
+  }
+
+  render(){
+    return(
+      <Container className="paddedContainer">
+
+        <h1>Documentation</h1>
+
+        <h3>Overview</h3>
+        <Label as='a' color='yellow' image>IN<Label.Detail>Development</Label.Detail></Label>
+
+        <h3>Table of contents:</h3>
+        <ul>
+          <li>Routing</li>
+          <li>Components</li>
+          <li>Redux - Sagas - API</li>
+          <li>UI & CSS</li>
+        </ul>
+
+        <h3>Routing</h3>
+        <Label as='a' color='yellow' image>IN<Label.Detail>Development</Label.Detail></Label>
+
+        <h3>Components</h3>
+        <Label as='a' color='yellow' image>IN<Label.Detail>Development</Label.Detail></Label>
+
+        <h3>Redux - Sagas - API</h3>
+        <Label as='a' color='yellow' image>IN<Label.Detail>Development</Label.Detail></Label>
+
+        <h3>UI & CSS</h3>
+        <Label as='a' color='yellow' image>IN<Label.Detail>Development</Label.Detail></Label>
+
+      </Container>
+    )
+  }
+
+
+}
+
+export default Docs