aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Navbar.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Navbar.js')
-rw-r--r--src/components/Navbar.js171
1 files changed, 117 insertions, 54 deletions
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 9b40882..3fdf94d 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,20 +1,36 @@
-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";
+import Container from "./Container";
+import {ChevronDownIcon} from "@heroicons/react/24/solid";
+import {BellIcon} from "@heroicons/react/24/outline";
+
+
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 (
+ <Container>
<div className="w-full">
- <nav className="container relative flex flex-wrap items-center justify-between p-8 mx-auto lg:justify-between lg:flex-nowrap lg:px-0.5 xl:px-0">
- {/* Logo */}
+ <nav className="container relative flex flex-wrap border-b border-gray-100 items-center justify-between p-8 mx-auto lg:justify-between lg:flex-nowrap lg:px-0.5 xl:px-0">
+ {/* Logo */}
<Disclosure>
{({ open }) => (
<>
@@ -34,67 +50,114 @@ 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>
+ {/* Right side 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">
+ <div className="flex items-center space-x-3">
+ <button className="w-5 h-5 text-gray-400"> <BellIcon /></button>
+ <span className="border-l border-gray-300 h-6"></span>
+ <Disclosure as="div" className="relative">
+ <Disclosure.Button as="button" aria-label="Toggle Profile Menu" className="flex items-center justify-center text-sm 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" />
+ <ChevronDownIcon className="w-4 h-4 ml-1 text-gray-400" />
+ </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>
+ </div>
+ )}
</nav>
</div>
- );
-}
+ </Container>
+ )}
export default Navbar;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-21 07:30:44 +0000