1 files changed, 132 insertions, 0 deletions
diff --git a/components/Header.js b/components/Header.js
new file mode 100644
index 0000000..4302af9
--- /dev/null
+++ b/components/Header.js
@@ -0,0 +1,132 @@
+import React, {useState} from 'react'
+import Link from 'next/link'
+import useUser from 'lib/useUser'
+import fetchJson from 'lib/fetchJson'
+import {toggleMin} from 'helpers/windowActions'
+import {useRouter} from 'next/router'
+
+const Header = ({apps, setApps}) => {
+  const [userMenu, setUserMenu] = useState(false);
+  const {user, mutateUser} = useUser()
+  const router = useRouter()
+
+  const handleLogout = async (e) => {
+    e.preventDefault()
+    mutateUser(
+      await fetchJson('/api/logout', {method: 'POST'}),
+      false
+    )
+    router.push('/login')
+  }
+
+  return (
+    <header>
+      <nav>
+        <ul className='header__apps'>
+          {
+            apps && apps.map(app => (
+              <li
+                key={app.name}
+                style={app.min ? {fontWeight: 600} : {}}
+                onClick={() => toggleMin(app.name, apps, setApps)}
+              >
+                {app.name}
+              </li>
+            ))
+          }
+        </ul>
+        <ul>
+          {!user?.isLoggedIn && (
+            <li>
+              <Link href="/register">
+                <a>Register</a>
+              </Link>
+            </li>
+          )}
+          {!user?.isLoggedIn && (
+            <li>
+              <Link href="/login">
+                <a>Login</a>
+              </Link>
+            </li>
+          )}
+          {user?.isLoggedIn && (
+            <li>
+              <p
+                className='user-menu'
+                onClick={() => setUserMenu(!userMenu)}
+              >{user?.email}</p>
+              {
+                userMenu && (
+                  <ul className='user-submenu'>
+                    <li>
+                      <a href="/api/logout" onClick={handleLogout}>
+                        Logout
+                      </a>
+                    </li>
+                  </ul>
+                )
+              }
+            </li>
+          )}
+        </ul>
+      </nav>
+      <style jsx>{`
+        header {
+          height: 2em;
+          padding: 0.5rem;
+          background-color: rgba(255, 255, 255, 0.4);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.5)
+        }
+
+        nav {
+          display: flex;
+        }
+
+        .header__apps {
+          flex-grow: 1;
+          overflow: auto;
+        }
+
+        li {
+          margin-left: 1em;
+          margin-right: 1em;
+          display: inline-block;
+          cursor: pointer;
+        }
+
+        .header__separator {
+          margin-right: auto;
+        }
+
+        a {
+          color: #333;
+          font-weight: 600;
+          text-decoration: none;
+          align-items: center;
+        }
+
+        .user-menu {
+          font-weight: 600;
+          cursor: pointer;
+          position: relative;
+        }
+
+        .user-submenu {
+          position: absolute;
+          right: 0;
+          top: 2.1em;
+          width: 10em;
+          padding: .5em;
+          background-color: rgba(255, 255, 255, .9);
+          border: 1px solid rgba(255, 255, 255, .5)
+        }
+        .user-submenu a {
+          text-align: right;
+        }
+      `}</style>
+    </header>
+  )
+}
+
+export default Header