From 68d3136f396c255d06d4dd72203362e5beb0b513 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 14 Sep 2020 18:28:38 -0700
Subject: [PATCH] Add unauth menu

---
 src/components/Header/Header.tsx         | 12 ++++---
 src/components/UnauthMenu/UnauthMenu.css | 42 ++++++++++++++++++++++++
 src/components/UnauthMenu/UnauthMenu.tsx | 37 +++++++++++++++++++++
 3 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/components/UnauthMenu/UnauthMenu.css
 create mode 100644 src/components/UnauthMenu/UnauthMenu.tsx

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 69b195ad..c3f11813 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import './Header.css'
 
 import Button from '../Button/Button'
+import UnauthMenu from '../UnauthMenu/UnauthMenu'
 
 class Header extends React.Component {
     constructor(props) {
@@ -25,14 +26,17 @@ class Header extends React.Component {
     render() {
         return <nav className="Header">
             <div className="left">
-                <Link to='/'>
-                    <Button type="new">New</Button>
-                </Link>
+                <div className="dropdown">
+                    <Button type="menu">Menu</Button>
+                    <UnauthMenu />
+                </div>
             </div>
             <div className="push" />
             <div className="right">
                 <Button type="link" click={this.copyToClipboard}>Copy link</Button>
-                <Button type="menu">Menu</Button>
+                <Link to='/'>
+                    <Button type="new">New</Button>
+                </Link>
             </div>
         </nav>
     }
diff --git a/src/components/UnauthMenu/UnauthMenu.css b/src/components/UnauthMenu/UnauthMenu.css
new file mode 100644
index 00000000..693d4e43
--- /dev/null
+++ b/src/components/UnauthMenu/UnauthMenu.css
@@ -0,0 +1,42 @@
+.Menu {
+    background: white;
+    border-radius: 6px;
+    display: none;
+    min-width: 140px;
+    position: absolute;
+    top: 31px;
+    z-index: 1;
+}
+
+.MenuItem {
+    -webkit-font-smoothing: antialiased;
+
+    color: #777;
+    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
+    font-weight: 500;
+    padding: 6px 12px;
+}
+
+.MenuItem:hover {
+    color: #555;
+    cursor: pointer;
+    background: #e9e9e9;
+}
+
+.MenuGroup {
+    border-bottom: 2px solid #f5f5f5;
+}
+
+.MenuGroup:first-child .MenuItem:first-child:hover {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.MenuGroup:last-child .MenuItem:last-child:hover {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.MenuGroup:last-child {
+    border-bottom: none;
+}
\ No newline at end of file
diff --git a/src/components/UnauthMenu/UnauthMenu.tsx b/src/components/UnauthMenu/UnauthMenu.tsx
new file mode 100644
index 00000000..523cf107
--- /dev/null
+++ b/src/components/UnauthMenu/UnauthMenu.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import './UnauthMenu.css'
+
+
+function UnauthMenu() {
+
+    return (
+        <ul className="Menu">
+            <div className="MenuGroup">
+                <li className="MenuItem">About</li>
+                <li className="MenuItem">Guides</li>
+            </div>
+            <div className="MenuGroup">
+                <li className="MenuItem" onClick={openLoginModal}>Log in</li>
+                <li className="MenuItem" onClick={openSignupModal}>Sign up</li>
+                ) : null}
+            </div>
+        </ul>
+    )
+}
+
+export default UnauthMenu
+
+// if (this.state.loggedIn) {
+//     return (
+//         <ul className="Menu">
+//             <div className="MenuGroup">
+//                 <li className="MenuItem">My Parties</li>
+//                 <li className="MenuItem">Guides</li>
+//                 <li className="MenuItem">About</li>
+//             </div>
+//             <div className="MenuGroup">
+//                 <li className="MenuItem">Log out</li>
+//             </div>
+//         </ul>
+//     )
+// } else {
\ No newline at end of file