add login dropdown (#288)

* Added to-do comment

* Dropdown created with placeholder profile icon

* Default profile icon added

* removed comments and renamed redirect Modal var

Co-authored-by: Akshara Sundararajan <[email protected]>

src/Nav.js

@@ -4,16 +4,12 @@ import { Link, withRouter, useLocation } from "react-router-dom";
 import tinykeys from "tinykeys";
 import Button from "./components/Button";
 import Input from "./components/Input";
+import LoginDropdown from "./components/LoginDropdown";
 
 function useQuery() {
  return new URLSearchParams(useLocation().search);
 }
-function Nav({
- isLoggedIn,
- openRedirectDialogModalWindow,
- setSearchValue,
- history,
-}) {
+function Nav({ isLoggedIn, openModal, setSearchValue, history }) {
  const pushHistory = (searchValue) => {
  history.push({
  pathname: "/search",
@@ -81,8 +77,10 @@ function Nav({
  placeholder="Search sound..."
  // type="search" // This seems appropriate, but adds an X that interferes with the search icon.
  />
- {!isLoggedIn && (
- <Button onClick={openRedirectDialogModalWindow}>Login</Button>
+ {isLoggedIn ? (
+ <LoginDropdown />
+ ) : (
+ <Button onClick={openModal}>Login</Button>
  )}
  </div>
  </nav>

src/components/LoginDropdown.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { personCircleSharp } from "ionicons/icons";
+import { IonIcon } from "@ionic/react";
+import Button from "./Button";
+
+export default function Dropdown({ onClick = () => {} }) {
+ return (
+ <div className="flex items-center justify-center">
+ <div className="relative inline-block text-left">
+ <Menu>
+ {({ open }) => (
+ <>
+ <span className="rounded-md shadow-sm">
+ <Menu.Button className="inline-flex justify-center w-full text-sm font-medium leading-5 rounded-md">
+ <Button onClick={onClick}>
+ <IonIcon icon={personCircleSharp} size="small"></IonIcon>
+ </Button>
+ </Menu.Button>
+ </span>
+
+ <Transition
+ show={open}
+ enter="transition ease-out duration-100"
+ enterFrom="transform opacity-0 scale-95"
+ enterTo="transform opacity-100 scale-100"
+ leave="transition ease-in duration-75"
+ leaveFrom="transform opacity-100 scale-100"
+ leaveTo="transform opacity-0 scale-95"
+ >
+ <Menu.Items
+ static
+ className="absolute right-0 w-56 mt-2 origin-top-right bg-secondary text-primary divide-y divide-gray-100 border shadow-lg outline-none"
+ >
+ <div>
+ <Menu.Item>
+ <a className="flex cursor-pointer justify-between w-full px-4 py-2 text-sm font-bold leading-5 text-left">
+ Logged in as ___.
+ </a>
+ </Menu.Item>
+ <Menu.Item>
+ <a className="flex cursor-pointer justify-between w-full px-4 py-2 text-sm leading-5 text-left">
+ My Profile
+ </a>
+ </Menu.Item>
+ <Menu.Item className="flex cursor-pointer justify-start w-full px-4 py-2 text-sm leading-5 text-left">
+ <span>Settings</span>
+ </Menu.Item>
+ <Menu.Item>
+ <a className="flex cursor-pointer justify-between w-full px-4 py-2 text-sm leading-5 text-left">
+ Log Out
+ </a>
+ </Menu.Item>
+ </div>
+ </Menu.Items>
+ </Transition>
+ </>
+ )}
+ </Menu>
+ </div>
+ </div>
+ );
+}