2 files changed, 37 insertions, 11 deletions
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 3fdf94d..a836e22 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -10,7 +10,7 @@ import {BellIcon} from "@heroicons/react/24/outline";
 
 
 const Navbar = () => {
-    const { user } = useContext(AuthContext);
+    const { user, logout } = useContext(AuthContext);
 
     const loggedOutNavigation = [
         "Find Opportunities",
@@ -142,11 +142,23 @@ const Navbar = () => {
                                         </div>
                                     </div>
                                     <ul className="py-2 text-sm text-gray-700 dark:text-gray-200">
-                                        {loggedInNavigation.map((menu, index) => (
+                                        {loggedInNavigation.map((item, index) => (
                                             <li className="mr-3 nav__item" key={index}>
-                                                <Link key={index} to={`/${menu.toLowerCase().replace(/\s+/g, '-')}`} className="inline-block px-4 py-2 text-md font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800">
-                                                    {menu}
-                                                </Link>
+                                                {item === 'Sign Out' ? (
+                                                    <button
+                                                        onClick={logout}
+                                                        className="inline-block px-4 py-2 text-md font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800"
+                                                    >
+                                                        {item}
+                                                    </button>
+                                                ) : (
+                                                    <Link
+                                                        to={`/${item.toLowerCase().replace(/\s+/g, '-')}`}
+                                                        className="inline-block px-4 py-2 text-md font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800"
+                                                    >
+                                                        {item}
+                                                    </Link>
+                                                )}
                                             </li>
                                         ))}
                                     </ul>
diff --git a/src/providers/AuthContext.js b/src/providers/AuthContext.js
index a32fb01..03ab298 100644
--- a/src/providers/AuthContext.js
+++ b/src/providers/AuthContext.js
@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useState } from 'react';
+import React, {createContext, useEffect, useState} from 'react';
 
 export const AuthContext = createContext();
 
@@ -33,11 +33,25 @@ export const AuthProvider = ({ children }) => {
         localStorage.setItem('refreshToken', token);
     };
 
-    const logout = () => {
-        setUser(null);
-        setRefreshToken(null);
-        localStorage.removeItem('user');
-        localStorage.removeItem('refreshToken');
+    const logout = async () => {
+        try {
+            const response = await fetch(process.env.REACT_APP_LOGOUT_ROUTE, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (response.ok) {
+                setUser(null);
+                setRefreshToken(null);
+                localStorage.removeItem('user');
+                localStorage.removeItem('refreshToken');
+            } else {
+                console.error('Logout failed:', response.statusText);
+            }
+        } catch (error) {
+            console.error('Error logging out:', error);
+        }
     };
 
     const authContextValue = {