Added navigation divider

src/components/header/index.js

@@ -54,14 +54,14 @@ class Header extends React.Component {
   render() {
     return <div style={{height: '72px'}}>
       <nav className="uk-navbar-container uk-margin uk-dark uk-navbar-transparent" uk-navbar="mode: click">
-        <div className="uk-navbar-center">
+        <div className="uk-navbar-right right">
           <ul className="uk-navbar-nav">
             <li className={[this.props.location.pathname === '/' ? 'uk-active' : ''].join(' ')}>
               <Link className={'heading-text'} to={'/'}><span>Home</span></Link></li>
             <li className={[this.props.location.pathname === '/timeline' ? 'uk-active' : ''].join(' ')}>
               <Link className={'heading-text'} to={'/timeline'}><span>Timeline</span></Link></li>
-            <li className={[this.props.location.pathname === '/about' ? 'uk-active' : ''].join(' ')}>
-              <Link className={'heading-text'} to={'/about'}><span>About</span></Link></li>
+            {/* <li className={[this.props.location.pathname === '/about' ? 'uk-active' : ''].join(' ')}>
+              <Link className={'heading-text'} to={'/about'}><span>About</span></Link></li> */}
             <li className={[this.props.location.pathname === '/dashboard' ? 'uk-active' : ''].join(' ')}>
               {!this.props.signedIN ? <SignIn/> : <Link className={'heading-text'} to={'/dashboard'}>
                 <span>Dashboard</span></Link>}</li>

src/components/header/styles.css

@@ -11,6 +11,9 @@
   padding-bottom: 4px;
 }
 
+.right {
+  margin-right: 10%;
+}
 
 .institute-logo {
   width: 30%;

src/components/index.css

@@ -0,0 +1,20 @@
+.divider{
+    position: absolute;
+    transform: rotate(90deg);
+    color: white;
+}
+
+.contact {
+    top: 33%;
+    right: 20px;
+}
+
+.about {
+    top: 77%;
+    right: 31px;
+}
+
+.team {
+    right: 34px;
+    top: 53%;
+}

src/components/index.js

@@ -1,131 +1,141 @@
 import React from 'react';
 import {connect} from 'react-redux';
-import Particles from 'react-particles-js';
+// import Particles from 'react-particles-js';
 
 import Countdown from './Countdown';
 import EventList from './eventList';
 
+import './index.css'
+
 class Home extends React.Component {
   componentDidMount() {
     document.body.scrollTop = 0;
   }
   render() {
     return <div>
-      {/*<img className="absolute triangle" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/triangle.png?alt=media&token=f3cbbbed-2d31-4201-a051-8d123d594156" alt=""/>*/}
-      {/*<img className="absolute square" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/square.png?alt=media&token=8979df90-1eaf-466e-9ef9-94546eec3e90" alt=""/>*/}
-      {/*<div className={'absolute triangle'}/>*/}
-      {/*<div className={'absolute square'} />*/}
+      {/* <img className="absolute triangle" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/triangle.png?alt=media&token=f3cbbbed-2d31-4201-a051-8d123d594156" alt=""/>}
+      {<img className="absolute square" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/square.png?alt=media&token=8979df90-1eaf-466e-9ef9-94546eec3e90" alt=""/>}
+      {<div className={'absolute triangle'}/>}
+      {<div className={'absolute square'} />} */}
+
+      <div>
       <Countdown/>
-      <Particles params={{
-        "particles": {
-          "number": {
-            "value": 160,
-            "density": {
-              "enable": true,
-              "value_area": 800
-            }
-          },
-          "color": {
-            "value": "#ffffff"
-          },
-          "shape": {
-            "type": "circle",
-            "stroke": {
-              "width": 0,
-              "color": "#000000"
-            },
-            "polygon": {
-              "nb_sides": 5
+        <div>
+          <a href="/"><p className="divider contact">Contact</p></a>
+          <a href="/about"><p className="divider about">About</p></a>
+          <a href="/"><p className="divider team">Team</p></a>
+        </div>
+        {/* <Particles params={{
+          "particles": {
+            "number": {
+              "value": 160,
+              "density": {
+                "enable": true,
+                "value_area": 800
+              }
             },
-            "image": {
-              "src": "img/github.svg",
-              "width": 100,
-              "height": 100
-            }
-          },
-          "opacity": {
-            "value": 0.4,
-            "random": true,
-            "anim": {
-              "enable": true,
-              "speed": 1,
-              "opacity_min": 0,
-              "sync": false
-            }
-          },
-          "size": {
-            "value": 3,
-            "random": true,
-            "anim": {
-              "enable": false,
-              "speed": 4,
-              "size_min": 0.3,
-              "sync": false
-            }
-          },
-          "line_linked": {
-            "enable": false,
-            "distance": 150,
-            "color": "#ffffff",
-            "opacity": 0.4,
-            "width": 1
-          },
-          "move": {
-            "enable": true,
-            "speed": 1,
-            "direction": "none",
-            "random": true,
-            "straight": false,
-            "out_mode": "out",
-            "bounce": false,
-            "attract": {
-              "enable": false,
-              "rotateX": 600,
-              "rotateY": 600
-            }
-          }
-        },
-        "interactivity": {
-          "detect_on": "canvas",
-          "events": {
-            "onhover": {
-              "enable": true,
-              "mode": "bubble"
+            "color": {
+              "value": "#ffffff"
             },
-            "onclick": {
-              "enable": true,
-              "mode": "repulse"
+            "shape": {
+              "type": "circle",
+              "stroke": {
+                "width": 0,
+                "color": "#000000"
+              },
+              "polygon": {
+                "nb_sides": 5
+              },
+              "image": {
+                "src": "img/github.svg",
+                "width": 100,
+                "height": 100
+              }
             },
-            "resize": true
-          },
-          "modes": {
-            "grab": {
-              "distance": 400,
-              "line_linked": {
-                "opacity": 1
+            "opacity": {
+              "value": 0.4,
+              "random": true,
+              "anim": {
+                "enable": true,
+                "speed": 1,
+                "opacity_min": 0,
+                "sync": false
               }
             },
-            "bubble": {
-              "distance": 250,
-              "size": 0,
-              "duration": 2,
-              "opacity": 0,
-              "speed": 3
+            "size": {
+              "value": 3,
+              "random": true,
+              "anim": {
+                "enable": false,
+                "speed": 4,
+                "size_min": 0.3,
+                "sync": false
+              }
             },
-            "repulse": {
-              "distance": 400,
-              "duration": 0.4
+            "line_linked": {
+              "enable": false,
+              "distance": 150,
+              "color": "#ffffff",
+              "opacity": 0.4,
+              "width": 1
             },
-            "push": {
-              "particles_nb": 4
+            "move": {
+              "enable": true,
+              "speed": 1,
+              "direction": "none",
+              "random": true,
+              "straight": false,
+              "out_mode": "out",
+              "bounce": false,
+              "attract": {
+                "enable": false,
+                "rotateX": 600,
+                "rotateY": 600
+              }
+            }
+          },
+          "interactivity": {
+            "detect_on": "canvas",
+            "events": {
+              "onhover": {
+                "enable": true,
+                "mode": "bubble"
+              },
+              "onclick": {
+                "enable": true,
+                "mode": "repulse"
+              },
+              "resize": true
             },
-            "remove": {
-              "particles_nb": 2
+            "modes": {
+              "grab": {
+                "distance": 400,
+                "line_linked": {
+                  "opacity": 1
+                }
+              },
+              "bubble": {
+                "distance": 250,
+                "size": 0,
+                "duration": 2,
+                "opacity": 0,
+                "speed": 3
+              },
+              "repulse": {
+                "distance": 400,
+                "duration": 0.4
+              },
+              "push": {
+                "particles_nb": 4
+              },
+              "remove": {
+                "particles_nb": 2
+              }
             }
-          }
-        },
-        "retina_detect": true
-      }}/>
+          },
+          "retina_detect": true
+        }}/> */}
+      </div>
       <EventList/>
     </div>
   }