hack4impact-uiuc · Polarpi · Sep 29, 2020 · Sep 29, 2020 · Sep 29, 2020 · Sep 29, 2020
diff --git a/client/package.json b/client/package.json
@@ -12,6 +12,8 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

diff --git a/client/public/imgs/logo-white.png b/client/public/imgs/logo-white.png
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,24 +1,15 @@
 import React from "react";
-import logo from "./logo.svg";
+import Home from "./pages/HomeView";
+import { Head } from "./components";
 import "./styles/App.css";
 
 function App() {
+  let name = "Person";
+  let isLoggedIn = false;
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Head name={name} isLoggedIn={isLoggedIn} />
+      <Home />
     </div>
   );
 }

diff --git a/client/src/components/Head/index.jsx b/client/src/components/Head/index.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import Navbar from "../Navbar";
+
+const Head = ({ isLoggedIn, name }) => (
+  <Navbar isLoggedIn={isLoggedIn} name={name} />
+);
+
+export default Head;
diff --git a/client/src/components/Navbar/index.jsx b/client/src/components/Navbar/index.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import AppBar from "@material-ui/core/AppBar";
+import PermIdentityIcon from "@material-ui/icons/PermIdentityOutlined";
+import Toolbar from "@material-ui/core/Toolbar";
+import "../../styles/Navbar.css";
+
+const LoginLink = () => (
+  <a id="nav-login" href="#login">
+    Login
+  </a>
+);
+
+const LogoutLink = () => (
+  <a id="nav-logout" href="#logout">
+    Logout
+  </a>
+);
+
+const ProfileLink = ({ name }) => (
+  <div id="nav-profile">
+    <PermIdentityIcon id="nav-profile-icon" />
+    <a id="nav-profile-link" href="#profile">
+      Hi {name}
+    </a>
+  </div>
+);
+
+const Navbar = ({ isLoggedIn, name }) => {
+  let loginOptions;
+
+  loginOptions = isLoggedIn ? (
+    <div className="right-nav">
+      <ProfileLink name={name} />
+      <LogoutLink />
+    </div>
+  ) : (
+    <LoginLink />
+  );
+
+  return (
+    <div>
+      <AppBar>
+        <Toolbar classes={{ root: "nav" }}>
+          <img id="nav-logo" src="/imgs/logo-white.png" alt="Closegap Logo" />
+          {loginOptions}
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/client/src/components/index.js b/client/src/components/index.js
@@ -0,0 +1,3 @@
+import Head from "./Head";
+
+export { Head };
diff --git a/client/src/pages/HomeView/index.jsx b/client/src/pages/HomeView/index.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import "../../styles/Home.css";
+
+const Home = () => (
+  <div>
+    <h1 className="title">Welcome</h1>
+  </div>
+);
+
+export default Home;
diff --git a/client/src/styles/Home.css b/client/src/styles/Home.css
@@ -0,0 +1,11 @@
+body {
+  background-color: rgb(255, 250, 250);
+}
+
+.title {
+  padding-top: 100px;
+  color: #231d31;
+  font-family: Roboto;
+  font-size: 48px;
+  font-weight: normal;
+}
diff --git a/client/src/styles/Navbar.css b/client/src/styles/Navbar.css
@@ -0,0 +1,48 @@
+.nav {
+  background-color: rgb(37, 0, 50);
+  justify-content: space-between;
+}
+
+#nav-logo {
+  padding: 20px 10px;
+}
+
+.right-nav {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+#nav-login {
+  color: #ffffff;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-family: Roboto;
+}
+
+#nav-logout {
+  padding-top: 4px;
+  color: rgb(233, 87, 62);
+  text-transform: uppercase;
+  text-decoration: none;
+  font-family: Roboto;
+  font-size: 14px;
+}
+
+#nav-profile {
+  display: flex;
+  align-items: center;
+}
+
+#nav-profile-icon {
+  color: rgb(233, 87, 62);
+}
+
+#nav-profile-link {
+  padding-left: 4px;
+  color: #ffffff;
+  text-decoration: none;
+  font-family: Roboto;
+  font-size: 18px;
+  font-weight: 500;
+}