blob: 9b4088228153137c9a5b6fc4072618c9a5fb499d (
plain)
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
|
import React from 'react';
import { Disclosure } from "@headlessui/react";
import { Link } from "react-router-dom";
import logo from "../assets/img/logo.svg";
const Navbar = () => {
const navigation = [
"Find Opportunities",
"Recruit Volunteers",
"Help Center",
"About Us",
];
return (
<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 */}
<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>
<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">
{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>
</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>
</nav>
</div>
);
}
export default Navbar;
|
