chore: adding emotion and initial styles

src/App.js

@@ -11,27 +11,18 @@ import User from "./components/screens/User";
 import Login from "./components/screens/Login";
 import Register from "./components/screens/Register";
 
+import { withAuthentication } from "./components/session";
+
 class App extends Component {
+  state = {
+    authUser: JSON.parse(localStorage.getItem("authUser"))
+  };
+
   render() {
+    const { authUser } = this.state;
     return (
       <Router>
         <Navbar />
-        <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>
-        </div>
         <Route path="/:year" component={Year} />
         <Route path="/:year/:month" component={Month} />
         <Route path="/:year/:month/:day" component={Day} />
@@ -43,4 +34,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default withAuthentication(App);

src/components/Navbar/Navbar.js

@@ -1,27 +1,55 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import SignOut from "../SignOut";
+import styled from "@emotion/styled";
 
-const Navbar = () => (
-  <div>
-    <ul>
-      <li>
-        <Link to={"/"}>Landing</Link>
-      </li>
-      <li>
-        <Link to={"/user"}>Account</Link>
-      </li>
-      <li>
-        <Link to={"/login"}>Login</Link>
-      </li>
-      <li>
-        <Link to={"/register"}>Register</Link>
-      </li>
-      <li>
-        <SignOut />
-      </li>
-    </ul>
-  </div>
+import SignOut from "../SignOut";
+import { withAuthentication } from "../session";
+
+const Header = styled.div`
+  background-color: #fafbfc;
+  height: 60px;
+  display: grid;
+  grid-template-areas: "... nav ...";
+  grid-template-columns: 1fr minmax(240px, 720px) 1fr;
+  align-items: center;
+`;
+const Nav = styled.div`
+  grid-area: nav;
+  max-width: 720px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+`;
+const Logo = styled.div``;
+const NavIcons = styled.div`
+  display: flex;
+  flex-direction: row;
+  * + * {
+    margin-left: 10px;
+  }
+`;
+
+const Navbar = ({ authUser }) => (
+  <Header>
+    <Nav>
+      <Logo>Logo</Logo>
+      <NavIcons>
+        {authUser ? (
+          <React.Fragment>
+            <Link to={"/user"}>Account</Link>
+            <SignOut />
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <Link to={"/"}>Landing</Link>
+            <Link to={"/login"}>Login</Link>
+            <Link to={"/register"}>Register</Link>
+          </React.Fragment>
+        )}
+      </NavIcons>
+    </Nav>
+  </Header>
 );
 
-export default Navbar;
+export default withAuthentication(Navbar);