Added profile dropdown in login

help-is-here · Dec 20, 2023 · 5b1c771 · 5b1c771
1 parent 36d102d
commit 5b1c771
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -9,5 +9,6 @@
     <body>
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>
+        <script src="node_modules/flowbite/dist/flowbite.min.js"></script>
     </body>
 </html>
diff --git a/src/components/Auth/LogoutButton.tsx b/src/components/Auth/LogoutButton.tsx
diff --git a/src/components/Home/IconNav.tsx b/src/components/Home/IconNav.tsx
@@ -36,6 +36,7 @@ export const IconNav = () => {
                 {details.map((item) => {
                     return (
                         <IconNavElement
+                            key={item.title}
                             title={item.title}
                             image={item.image}
                             link={item.link}

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -3,11 +3,11 @@ import { FaBars } from 'react-icons/fa'
 import logo from '../../assets/logo.png'
 import LoginButton from '../Auth/LoginButton.tsx'
 import SessionWrapper from '../Auth/SessionWrapper.tsx'
-import LogoutButton from '../Auth/LogoutButton.tsx'
+import ProfileMenu from './ProfileMenu.tsx'
 
 export const Navigation = () => {
     return (
-        <div className="flex w-full justify-between bg-white p-8 md:justify-center">
+        <div className="flex w-full items-center justify-between bg-white p-8 md:justify-center">
             <div className="justify-self-start">
                 <img src={logo} alt="logo" className="h-12" />
             </div>
@@ -20,7 +20,7 @@ export const Navigation = () => {
             </div>
             <div className="hidden md:block">
                 <SessionWrapper
-                    ifSession={<LogoutButton />}
+                    ifSession={<ProfileMenu />}
                     notSession={<LoginButton />}
                 />
             </div>

diff --git a/src/components/Navigation/ProfileMenu.tsx b/src/components/Navigation/ProfileMenu.tsx
@@ -0,0 +1,48 @@
+import { FaUser } from 'react-icons/fa'
+import client from '@/database/client'
+
+export default function ProfileMenu() {
+    const signOut = async () => {
+        const { error } = await client.auth.signOut()
+        if (error) throw error
+    }
+    return (
+        <div>
+            <button
+                id="dropdownDefaultButton"
+                data-dropdown-toggle="dropdown-button"
+                className="inline-flex items-center rounded-full bg-orange-500 p-4 text-center text-orange-50"
+                type="button"
+            >
+                <FaUser />
+            </button>
+
+            <div
+                id="dropdown-button"
+                className="z-10 hidden w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:bg-gray-700"
+            >
+                <ul
+                    className="py-2 text-sm text-gray-700 dark:text-gray-200"
+                    aria-labelledby="dropdownDefaultButton"
+                >
+                    <li>
+                        <a
+                            href="/change-password"
+                            className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                        >
+                            Change password
+                        </a>
+                    </li>
+                    <li>
+                        <button
+                            onClick={signOut}
+                            className="block w-full px-4 py-2 text-start hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                        >
+                            Logout
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    )
+}