diff options
Diffstat (limited to 'src/components/Navbar.js')
| -rw-r--r-- | src/components/Navbar.js | 22 |
1 files changed, 17 insertions, 5 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> |