diff options
Diffstat (limited to 'src/components/Navbar.js')
-rw-r--r-- | src/components/Navbar.js | 155 |
1 files changed, 103 insertions, 52 deletions
diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 9b40882..f0db2cd 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,14 +1,24 @@ -import React from 'react'; +import React, {useContext} from 'react'; import { Disclosure } from "@headlessui/react"; import { Link } from "react-router-dom"; import logo from "../assets/img/logo.svg"; +import {AuthContext} from "../providers/AuthContext"; const Navbar = () => { - const navigation = [ + const { user } = useContext(AuthContext); + + const loggedOutNavigation = [ "Find Opportunities", "Recruit Volunteers", - "Help Center", - "About Us", + "Sign Up", + "Login" + ]; + + const loggedInNavigation = [ + "Edit Profile", + "Settings", + "Help", + "Sign Out" ]; return ( @@ -34,67 +44,108 @@ const Navbar = () => { </span> </Link> - <Disclosure.Button - aria-label="Toggle Menu" - className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:text-gray-300 dark:focus:bg-trueGray-700"> - <svg - className="w-6 h-6 fill-current" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 24 24"> - {open && ( - <path - fillRule="evenodd" - clipRule="evenodd" - d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" - /> - )} - {!open && ( - <path - fillRule="evenodd" - d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" - /> - )} - </svg> - </Disclosure.Button> + {/* Hamburger drop down menu */} + {!user ? ( + <Disclosure.Button aria-label="Toggle Menu" className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:text-gray-300 dark:focus:bg-trueGray-700"> + <svg className="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + {open && ( + <path fillRule="evenodd" clipRule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/> + )} + {!open && ( + <path fillRule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/> + )} + </svg> + </Disclosure.Button> + ) : ( + <Disclosure.Button aria-label="Toggle Menu" className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:text-gray-300 dark:focus:bg-trueGray-700"> + <svg className="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + {open && ( + <path fillRule="evenodd" clipRule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/> + )} + {!open && ( + <path fillRule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/> + )} + </svg> + </Disclosure.Button> + )} + - <Disclosure.Panel className="flex flex-wrap w-full my-5 lg:hidden"> - <> - {navigation.map((item, index) => ( - <Link key={index} to="/" className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none"> + {/* Hamburger drop down menu options */} + {!user ? ( + <Disclosure.Panel className="flex flex-wrap w-full my-5 lg:hidden"> + {loggedOutNavigation.map((item, index) => ( + <Link key={index} to={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none"> {item} </Link> ))} <Link to="/login" className="w-full px-6 py-2 mt-3 text-center text-white bg-indigo-600 rounded-md lg:ml-5"> Login </Link> - </> - </Disclosure.Panel> + </Disclosure.Panel> + ) : ( + <Disclosure.Panel className="w-full flex flex-wrap my-5 lg:hidden"> + <div className="w-full border-b-2 border-gray-150 px-4 py-2 -ml-4 flex items-center"> + <img className="w-10 h-10 rounded-full" src={logo} alt="user-img" /> + <div className="ml-4"> + <strong>{user.name}</strong> + <br /> + <span>{user.email}</span> + </div> + </div> + {loggedInNavigation.map((item, index) => ( + <Link key={index} to={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none"> + {item} + </Link> + ))} + </Disclosure.Panel> + )} </div> </> )} </Disclosure> - {/* menu */} - <div className="hidden text-center lg:flex lg:items-center"> - <ul className="items-center justify-end flex-1 pt-6 list-none lg:pt-0 lg:flex"> - {navigation.map((menu, index) => ( - <li className="mr-3 nav__item" key={index}> - <Link to="/" className="inline-block px-4 py-2 text-lg 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> - </li> - ))} - </ul> - </div> - - <div className="hidden mr-3 space-x-4 lg:flex nav__item"> - <Link to="/login" className="px-6 py-2 text-white bg-indigo-600 rounded-md md:ml-5"> - Login - </Link> - </div> + {/* Header bar */} + {!user ? ( + <div className="hidden text-center lg:flex lg:items-center"> + <ul className="items-center justify-end flex-1 pt-6 list-none lg:pt-0 lg:flex"> + {loggedOutNavigation.map((menu, 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-lg 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> + </li> + ))} + </ul> + </div> + ) : ( + <div className="hidden lg:flex lg:items-center"> + <Disclosure as="div" className="relative"> + <Disclosure.Button as="button" aria-label="Toggle Profile Menu" className="flex items-center justify-center text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"> + <img className="w-8 h-8 rounded-full" src={logo} alt="user-img" /> + </Disclosure.Button> + <Disclosure.Panel className="absolute right-0 mt-2 bg-white overflow-hidden whitespace-nowrap overflow-ellipsis divide-y divide-gray-100 rounded-lg shadow w-64 dark:bg-gray-700 dark:divide-gray-600 z-10"> + <div className="flex items-center mb-2 mt-2"> + <img className="w-10 h-10 rounded-full" src={logo} alt="user-img" /> + <div className="ml-2 ,b flex flex-col"> + <strong className="text-sm">{user.name}</strong> + <span className="text-xs text-gray-600">{user.email}</span> + </div> + </div> + <ul className="py-2 text-sm text-gray-700 dark:text-gray-200"> + {loggedInNavigation.map((menu, 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> + </li> + ))} + </ul> + </Disclosure.Panel> + </Disclosure> + </div> ) + } </nav> </div> - ); -} + )} export default Navbar; |