1 files changed, 58 insertions, 29 deletions
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
index ce020fef..5a4cd29e 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -1,37 +1,66 @@
-import React, {Component} from 'react';
-import FontAwesome from "react-fontawesome";
+import classNames from "classnames";
+import React from 'react';
 import Mailto from "react-mailto";
-import {Link} from "react-router-dom";
+import {Link, withRouter} from "react-router-dom";
+import {userIsLoggedIn} from "../../auth/index";
+import Login from "../../containers/auth/Login";
 import Logout from "../../containers/auth/Logout";
 import ProfileName from "../../containers/auth/ProfileName";
 import "./Navbar.css";
 
-class Navbar extends Component {
-    render() {
-        return (
-            <div className="opendc-navbar">
-                <Link className="opendc-brand" to="/">
-                    <img src="/img/logo.png" alt="OpenDC Logo"/>
-                    <div className="opendc-title">
-                        Open<strong>DC</strong>
-                    </div>
-                </Link>
-                <div className="navigation navbar-button-group">
-                    <Link className="simulations" title="Simulations" to="/simulations">Simulations</Link>
-                </div>
-                <div className="user-controls navbar-button-group">
-                    <Mailto className="support" title="Support" email="opendc.tudelft@gmail.com"
-                            headers={{subject: "OpenDC Support"}}>
-                        <FontAwesome name="question-circle" size="lg"/>
-                    </Mailto>
-                    <Link className="username" title="My Profile" to="/profile">
-                        <ProfileName/>
-                    </Link>
-                    <Logout/>
-                </div>
+const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
+
+const NavItemWithoutRoute = ({route, location, children}) => (
+    <li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}>
+        {children}
+    </li>
+);
+
+const Navbar = () => (
+    <nav className="navbar fixed-top navbar-toggleable-md navbar-light bg-faded">
+        <div className="container">
+            <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
+                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"/>
+            </button>
+            <Link className="navbar-brand opendc-brand" to="/">
+                <img src="/img/logo.png" alt="OpenDC Logo"/>
+            </Link>
+
+            <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>
+                </ul>
+                <ul className="navbar-nav">
+                    {userIsLoggedIn() ?
+                        [
+                            <NavItem route="/profile">
+                                <Link className="username nav-link" title="My Profile" to="/profile">
+                                    <ProfileName/>
+                                </Link>
+                            </NavItem>,
+                            <NavItem route="logout">
+                                <Logout/>
+                            </NavItem>
+                        ] :
+                        <NavItem route="login">
+                            <Login visible={true}/>
+                        </NavItem>
+                    }
+                </ul>
             </div>
-        );
-    }
-}
+        </div>
+    </nav>
+);
 
 export default Navbar;