Add content sections to homepage

4 files changed, 56 insertions, 56 deletions

diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js
new file mode 100644
index 00000000..83959f08
--- /dev/null
+++ b/src/components/navigation/AppNavbar.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Mailto from "react-mailto";
+import {Link} from "react-router-dom";
+import Navbar, {NavItem} from "./Navbar";
+import "./Navbar.css";
+
+const AppNavbar = () => (
+    <Navbar>
+        <NavItem route="/simulations">
+            <Link className="nav-link simulations" title="Simulations" to="/simulations">Simulations</Link>
+        </NavItem>
+        <NavItem route="email">
+            <Mailto className="nav-link support" title="Support" email="opendc@atlarge-research.com"
+                    headers={{subject: "OpenDC Support"}}>
+                Support
+            </Mailto>
+        </NavItem>
+
+    </Navbar>
+);
+
+export default AppNavbar;
diff --git a/src/components/navigation/HomeNavbar.js b/src/components/navigation/HomeNavbar.js
new file mode 100644
index 00000000..9c393da4
--- /dev/null
+++ b/src/components/navigation/HomeNavbar.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Navbar from "./Navbar";
+import "./Navbar.css";
+
+const ScrollNavItem = ({id, name}) => (
+    <li className="nav-item">
+        <a className="nav-link" href={id}>{name}</a>
+    </li>
+);
+
+const HomeNavbar = () => (
+    <Navbar>
+        <ScrollNavItem id="#stakeholders" name="Stakeholders"/>
+        <ScrollNavItem id="#modeling" name="Modeling"/>
+        <ScrollNavItem id="#simulation" name="Simulation"/>
+        <ScrollNavItem id="#technologies" name="Technologies"/>
+        <ScrollNavItem id="#team" name="Team"/>
+        <ScrollNavItem id="#contact" name="Contact"/>
+    </Navbar>
+);
+
+export default HomeNavbar;
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
index 5a4cd29e..c0c8c006 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -1,6 +1,5 @@
 import classNames from "classnames";
 import React from 'react';
-import Mailto from "react-mailto";
 import {Link, withRouter} from "react-router-dom";
 import {userIsLoggedIn} from "../../auth/index";
 import Login from "../../containers/auth/Login";
@@ -8,7 +7,7 @@ import Logout from "../../containers/auth/Logout";
 import ProfileName from "../../containers/auth/ProfileName";
 import "./Navbar.css";
 
-const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
+export const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
 
 const NavItemWithoutRoute = ({route, location, children}) => (
     <li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}>
@@ -16,8 +15,8 @@ const NavItemWithoutRoute = ({route, location, children}) => (
     </li>
 );
 
-const Navbar = () => (
-    <nav className="navbar fixed-top navbar-toggleable-md navbar-light bg-faded">
+const Navbar = ({children}) => (
+    <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" id="navbar">
         <div className="container">
             <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                     data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
@@ -30,16 +29,7 @@ const Navbar = () => (
 
             <div className="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul className="navbar-nav mr-auto">
-                    <NavItem route="/simulations">
-                        <Link className="nav-link simulations" title="Simulations"
-                              to="/simulations">Simulations</Link>
-                    </NavItem>
-                    <NavItem route="email">
-                        <Mailto className="nav-link support" title="Support" email="opendc.tudelft@gmail.com"
-                                headers={{subject: "OpenDC Support"}}>
-                            Support
-                        </Mailto>
-                    </NavItem>
+                    {children}
                 </ul>
                 <ul className="navbar-nav">
                     {userIsLoggedIn() ?
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
index 80346660..8e95b9c6 100644
--- a/src/components/navigation/Navbar.sass
+++ b/src/components/navigation/Navbar.sass
@@ -26,45 +26,11 @@
     display: inline-block
     width: 30px
 
-.navbar-button-group
-  display: inline-block
-  height: 100%
-
-  a
-    display: inline-block
-    line-height: $navbar-height
-    text-align: center
-    color: $gray-very-dark
-
-    +clickable
-    +transition(background, $transition-length)
-
-  a:hover
-    color: $gray-dark
-
-.navigation
-  margin-left: 10px
-
-  .simulations
-    float: left
-    padding: 0 20px
-
-    font-size: 12pt
-
-.user-controls
-  float: right
-  margin-right: $global-padding
-
-  .support
-    float: left
-    margin-top: -1px
-
-    width: $navbar-height
-
-    font-size: 14pt
-
-  .username
-    float: left
-    padding: 0 20px
-
-    font-size: 12pt
+.login
+  height: 40px
+  background: $blue
+  border: none
+  +clickable
+
+  &:hover
+    background: $blue-dark