Ashton logout userface

src/components/Navbar.js

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react'
 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 { useSession, 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,20 @@ 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 onClick={() => signOut()}>Sign Out</button>
+          </div>
+
+          {/* User Avatar Icon */}
+          {session && session.user && (
+            <div>
+              <img
+                src={session.user.image}
+                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>