added signout and icon

src/components/Navbar.js

@@ -5,7 +5,7 @@ import Image from 'next/image'
 import searchIcon from '../../public/svg/search.svg'
 import logo from '../../public/quaysideLogo.png'
 import { useSession } from 'next-auth/react'
-
+import { signOut } from 'next-auth/react'
 /**
  * A Navbar component that fetches a user's name from a specified API and displays a navigation bar with several interactive elements.
  *
@@ -89,6 +89,21 @@ const Navbar = () => {
             </div>
           </div>
 
+          {/*Sign Out*/}
+          <div className='flex w-2/12  lg:w-1/12 justify-end  my-auto text-right px-2'>
+            <button className="signout-button" onClick={() => signOut()}>Sign Out</button>
+          </div>
+
+          {/* User Avatar Icon */}
+          {session && session.user && (
+          <div className="avatar-container">
+            <img
+              src={session.user.image}
+              alt="User Avatar"
+              style={{ width: '40px', height: '40px', borderRadius: '50%' }}
+            />
+          </div>
+        )}
           {/* User */}
           <div className='flex w-2/12  lg:w-1/12 justify-end  my-auto text-right px-2'> {name} </div>