4 files changed, 35 insertions, 20 deletions
diff --git a/src/components/navigation/LogoutButton.js b/src/components/navigation/LogoutButton.js
new file mode 100644
index 00000000..e2da7751
--- /dev/null
+++ b/src/components/navigation/LogoutButton.js
@@ -0,0 +1,16 @@
+import PropTypes from "prop-types";
+import React from "react";
+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>
+);
+
+LogoutButton.propTypes = {
+    onLogout: PropTypes.func.isRequired,
+};
+
+export default LogoutButton;
diff --git a/src/components/navigation/LogoutButton.sass b/src/components/navigation/LogoutButton.sass
new file mode 100644
index 00000000..b63494ab
--- /dev/null
+++ b/src/components/navigation/LogoutButton.sass
@@ -0,0 +1,17 @@
+@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 bd6fd750..bbd08591 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import FontAwesome from "react-fontawesome";
 import Mailto from "react-mailto";
 import {Link} from "react-router-dom";
+import Logout from "../../containers/auth/Logout";
 import "./Navbar.css";
 
 class Navbar extends Component {
@@ -23,11 +24,8 @@ class Navbar extends Component {
                         <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>
+                    <Logout/>
                 </div>
-                <div id="google-signin" className="navbar-right"/>
             </div>
         );
     }
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
index a592eab0..8be622db 100644
--- a/src/components/navigation/Navbar.sass
+++ b/src/components/navigation/Navbar.sass
@@ -114,19 +114,3 @@
 
   .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