Restyle navbar and use across entire site

4 files changed, 79 insertions, 116 deletions

diff --git a/src/components/navigation/LogoutButton.js b/src/components/navigation/LogoutButton.js
index e2da7751..d58776dc 100644
--- a/src/components/navigation/LogoutButton.js
+++ b/src/components/navigation/LogoutButton.js
@@ -1,11 +1,11 @@
 import PropTypes from "prop-types";
 import React from "react";
+import FontAwesome from "react-fontawesome";
 import {Link} from "react-router-dom";
-import "./LogoutButton.css";
 
 const LogoutButton = ({onLogout}) => (
-    <Link className="logout" title="Sign out" to="#" onClick={onLogout}>
-        <span className="fa fa-lg fa-power-off"/>
+    <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
+        <FontAwesome name="power-off" size="lg"/>
     </Link>
 );
 
diff --git a/src/components/navigation/LogoutButton.sass b/src/components/navigation/LogoutButton.sass
deleted file mode 100644
index b63494ab..00000000
--- a/src/components/navigation/LogoutButton.sass
+++ /dev/null
@@ -1,17 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.logout
-  float: right
-  margin-top: -1px
-  width: $navbar-height
-
-  font-size: 14pt
-
-  +clickable
-
-  &:hover
-    background: #e3474d
-
-  &:active
-    background: #a73438
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;
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
index e9a83301..80346660 100644
--- a/src/components/navigation/Navbar.sass
+++ b/src/components/navigation/Navbar.sass
@@ -1,59 +1,30 @@
 @import ../../style-globals/_mixins.sass
 @import ../../style-globals/_variables.sass
 
-.opendc-navbar
-  position: relative
-  display: block
-  width: 100%
-  height: $navbar-height
-
-  color: #eee
-  background: #343434
-
-  z-index: 100
-
-  -webkit-box-shadow: -10px 8px 3px 12px #000
-  -moz-box-shadow: -10px 8px 3px 12px #000
-  box-shadow: -10px -10px 3px 12px #000
+.navbar
+  border-top: $blue 3px solid
+  border-bottom: $gray-semi-dark 1px solid
+  color: $gray-very-dark
+  background: #fafafb
 
 .opendc-brand
   display: inline-block
-  float: left
-  margin-left: $global-padding
+  //float: left
+  //margin-left: $global-padding
 
-  padding: 0 10px
+  //padding: 0 10px
 
-  cursor: pointer
-  color: #eee
-  height: 100%
+  //cursor: pointer
+  color: $gray-very-dark
+  //height: 100%
 
   +transition(background, $transition-length)
 
-  &:hover
-    color: #fff
-
   img
+    position: relative
+    bottom: 3px
     display: inline-block
-    float: left
-    margin: $navbar-padding 0
-
-    width: $navbar-height - $navbar-padding * 2
-    height: $navbar-height - $navbar-padding * 2
-    vertical-align: middle
-
-  .opendc-title
-    display: inline-block
-    float: right
-    margin-left: 20px
-
-    font-size: 16pt
-    line-height: $navbar-height
-
-.opendc-brand:hover
-  background: $blue
-
-.opendc-brand:active
-  background: $blue-dark
+    width: 30px
 
 .navbar-button-group
   display: inline-block
@@ -63,18 +34,16 @@
     display: inline-block
     line-height: $navbar-height
     text-align: center
-    color: #eee
-
-    border-left: 1px solid #464646
+    color: $gray-very-dark
 
     +clickable
     +transition(background, $transition-length)
 
-  a:last-of-type
-    border-right: 1px solid #464646
+  a:hover
+    color: $gray-dark
 
 .navigation
-  margin-left: 30px
+  margin-left: 10px
 
   .simulations
     float: left
@@ -82,12 +51,6 @@
 
     font-size: 12pt
 
-  .simulations:hover
-    background: #606060
-
-  .simulations:active
-    background: #161616
-
 .user-controls
   float: right
   margin-right: $global-padding
@@ -100,20 +63,8 @@
 
     font-size: 14pt
 
-  .support:hover
-    background: #41a0cd
-
-  .support:active
-    background: #307798
-
   .username
     float: left
     padding: 0 20px
 
     font-size: 12pt
-
-  .username:hover
-    background: #4eae44
-
-  .username:active
-    background: #2d6527