Added sections via react router

package.json

@@ -38,6 +38,8 @@
     "react": "^16.3.2",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.3.2",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.2.2",
     "reactstrap": "^6.0.1",
     "resolve": "1.6.0",
     "style-loader": "0.19.0",

src/App.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import './App.scss';
+import { Route, Switch } from 'react-router-dom';
+import Home from './common/Home';
 import MainHeader from './common/MainHeader';
+import CreateServer from './servers/CreateServer';
 
 export default class App extends React.Component {
   render() {
@@ -8,8 +11,10 @@ export default class App extends React.Component {
       <div>
         <MainHeader/>
         <div className="app">
-          <h1 className="app__title">Welcome to Shlink</h1>
+          <Switch>
-          <h5 className="App__intro">Please, select a server.</h5>
+            <Route path="/server/create" component={CreateServer} />
+            <Route path="/" component={Home} />
+          </Switch>
         </div>
       </div>
     );

src/App.scss

@@ -1,12 +1,5 @@
-.app {
+@import "./utils/base";
-  text-align: center;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
-}
 
-.app__title {
+.app {
-  font-size: 36px;
+  padding-top: $headerHeight;
 }

src/common/Home.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Home.scss';
+
+export default () => {
+  return (
+    <div className="home-container">
+      <h1 className="home-container__title">Welcome to Shlink</h1>
+      <h5 className="home-container__intro">Please, select a server.</h5>
+    </div>
+  );
+};

src/common/Home.scss

@@ -0,0 +1,14 @@
+@import "../utils/base";
+
+.home-container {
+  text-align: center;
+  height: calc(100vh - #{$headerHeight});
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
+}
+
+.home-container__title {
+  font-size: 36px;
+}

src/common/MainHeader.js

@@ -14,6 +14,7 @@ import {
 } from 'reactstrap';
 import './MainHeader.scss';
 import shlinkLogo from './shlink-logo-white.png';
+import { Link } from 'react-router-dom';
 
 export default class MainHeader extends React.Component {
   constructor(props) {
@@ -40,7 +41,7 @@ export default class MainHeader extends React.Component {
         <Collapse navbar isOpen={this.state.isOpen}>
           <Nav navbar className="ml-auto">
             <NavItem>
-              <NavLink href="#">
+              <NavLink tag={Link} to ="/server/create">
                 <FontAwesomeIcon icon={plusIcon}/>&nbsp; Add server
               </NavLink>
             </NavItem>

src/index.js

@@ -2,8 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.scss';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById('root')
+);
 registerServiceWorker();

src/servers/CreateServer.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <div>Create server</div>
+  );
+};

src/utils/base.scss

@@ -1 +1,6 @@
+
+// Colors
 $mainColor: #4696e5;
+
+// Misc
+$headerHeight: 57px;