From cbb322b66f3d3ab5ab16c52a7c914294f079a9b9 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 31 Mar 2023 01:31:03 +0600
Subject: [PATCH] chore: account dropdown

---
 src/components/Login/account-dropdown.tsx | 56 +++++++++++++++++++++++
 src/components/Login/account-nav.tsx      | 13 ++----
 2 files changed, 59 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Login/account-dropdown.tsx

diff --git a/src/components/Login/account-dropdown.tsx b/src/components/Login/account-dropdown.tsx
new file mode 100644
index 000000000..a5e64a80d
--- /dev/null
+++ b/src/components/Login/account-dropdown.tsx
@@ -0,0 +1,56 @@
+import Cookies from 'js-cookie';
+import { TOKEN_COOKIE_NAME } from '../../lib/utils';
+import { useEffect, useState } from 'preact/hooks';
+
+export default function AccountDropdown() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // If dropdown is open, close it.
+    const handleOpen = () => {
+      if (isOpen) setIsOpen(false);
+    };
+
+    document.addEventListener('click', handleOpen);
+    return () => document.removeEventListener('click', handleOpen);
+  }, [isOpen]);
+
+  return (
+    <div className="relative">
+      <button
+        className="flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
+        onClick={() => setIsOpen((p) => !p)}
+      >
+        <span className="mr-2">Account</span>
+      </button>
+
+      <div
+        className={`absolute right-0 mt-2 w-48 rounded-md bg-slate-800 py-1 shadow-xl ${
+          isOpen ? 'block' : 'hidden'
+        }`}
+      >
+        <ul>
+          <li className="px-1">
+            <a
+              href="/profile"
+              className="block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+            >
+              Your Profile
+            </a>
+          </li>
+          <li className="px-1">
+            <button
+              className="block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+              onClick={() => {
+                Cookies.remove(TOKEN_COOKIE_NAME);
+                window.location.reload();
+              }}
+            >
+              Logout
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Login/account-nav.tsx b/src/components/Login/account-nav.tsx
index cc8c03ab0..1e2650fc9 100644
--- a/src/components/Login/account-nav.tsx
+++ b/src/components/Login/account-nav.tsx
@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie';
 import { useAuth } from '../../hooks/use-auth';
 import { TOKEN_COOKIE_NAME } from '../../lib/utils';
+import AccountDropdown from './account-dropdown';
 
 export default function AccountNavigation() {
   const { user, isLoading } = useAuth();
@@ -16,21 +17,13 @@ export default function AccountNavigation() {
       ) : (
         <>
           {user ? (
-            <button
-              className="flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
-              onClick={() => {
-                Cookies.remove(TOKEN_COOKIE_NAME);
-                window.location.reload();
-              }}
-            >
-              <span className="mr-2">Logout</span>
-            </button>
+            <AccountDropdown />
           ) : (
             <a
               className="flex h-10 w-32 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
               href="/signup"
             >
-              <span className="mr-2">Login</span>
+              <span className="mr-2">Register</span>
             </a>
           )}
         </>