Add navbar to projects page

2 files changed, 168 insertions, 0 deletions

diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
new file mode 100644
index 00000000..a5f0510f
--- /dev/null
+++ b/src/components/navigation/Navbar.js
@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+import "./Navbar.css";
+import Mailto from "react-mailto";
+import FontAwesome from "react-fontawesome";
+
+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="projects" title="Projects" to="/projects">Projects</Link>
+                </div>
+                <div className="user-controls navbar-button-group">
+                    <Mailto className="support" title="Support" email="opendc.tudelft@gmail.com"
+                            headers={{subject: "OpenDC%20Support"}}>
+                        <FontAwesome name="question-circle" size="lg"/>
+                    </Mailto>
+                    <Link className="username" title="My Profile" to="/profile">Profile</Link>
+                    <Link className="sign-out" title="Sign out" to="#">
+                        <FontAwesome name="power-off" size="lg"/>
+                    </Link>
+                </div>
+                <div id="google-signin" className="navbar-right"/>
+            </div>
+        );
+    }
+}
+
+export default Navbar;
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
new file mode 100644
index 00000000..d40eecfb
--- /dev/null
+++ b/src/components/navigation/Navbar.sass
@@ -0,0 +1,132 @@
+@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
+
+.opendc-brand
+  display: inline-block
+  float: left
+  margin-left: $global-padding
+
+  padding: 0 10px
+
+  cursor: pointer
+  color: #eee
+  height: 100%
+
+  +transition(background, $transition-length)
+
+  img
+    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
+
+.navbar-button-group
+  display: inline-block
+  height: 100%
+
+  a
+    display: inline-block
+    line-height: $navbar-height
+    text-align: center
+    color: #eee
+
+    border-left: 1px solid #464646
+
+    +clickable
+    +transition(background, $transition-length)
+
+  a:last-of-type
+    border-right: 1px solid #464646
+
+.navigation
+  margin-left: 30px
+
+  .projects
+    float: left
+    padding: 0 20px
+
+    font-size: 12pt
+
+  .projects:hover
+    background: #606060
+
+  .projects:active
+    background: #161616
+
+.user-controls
+  float: right
+  margin-right: $global-padding
+
+  .support
+    float: left
+    margin-top: -1px
+
+    width: $navbar-height
+
+    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
+
+  .sign-out
+    float: right
+    margin-top: -1px
+    width: $navbar-height
+
+    font-size: 14pt
+
+  .sign-out:hover
+    background: #e3474d
+
+  .sign-out:active
+    background: #a73438
+
+#google-signin
+  display: none