1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
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 { user } = useContext(AuthContext);
const loggedOutNavigation = [
"Find Opportunities",
"Recruit Volunteers",
"Sign Up",
"Login"
];
const loggedInNavigation = [
"Edit Profile",
"Settings",
"Help",
"Sign Out"
];
return (
<Container>
<div className="w-full">
<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 }) => (
<>
<div className="flex flex-wrap items-center justify-between w-full lg:w-auto">
<Link to="/">
<span className="flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100">
<span>
<img
src={logo}
alt="heart shaped handshake logo"
width="32"
height="32"
className="w-8"
/>
</span>
<span>Helping Hands</span>
</span>
</Link>
{/* 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>
)}
{/* 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 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>
{/* 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;
|
