Added profile dropdown in login

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}

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>

src/components/Navigation/ProfileMenu.tsx

@@ -0,0 +1,35 @@
+import { FaUser } from 'react-icons/fa'
+import client from '@/database/client'
+import { Dropdown } from 'flowbite-react'
+import { Link } from 'react-router-dom'
+export default function ProfileMenu() {
+    const signOut = async () => {
+        const { error } = await client.auth.signOut()
+        if (error) throw error
+    }
+
+    const TriggerDropdown = (
+        <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>
+    )
+    return (
+        <div>
+            <Dropdown
+                label=""
+                dismissOnClick={false}
+                renderTrigger={() => TriggerDropdown}
+            >
+                <Dropdown.Item as={Link} to="/change-password">
+                    Change Password
+                </Dropdown.Item>
+                <Dropdown.Item onClick={signOut}>Sign out</Dropdown.Item>
+            </Dropdown>
+        </div>
+    )
+}