diff options
author | Jeff <jeffkleinaitis@gmail.com> | 2024-04-09 15:12:50 -0400 |
---|---|---|
committer | Jeff <jeffkleinaitis@gmail.com> | 2024-04-09 15:12:50 -0400 |
commit | 9ac6e1ddef7a1a9f277b9736fee08d97247adab2 (patch) | |
tree | b2b5ce4599514ba744744ba3f0d6f64de7c2602e /src/components/Navbar.js | |
parent | 102324996e227e1e9bf70a1641afb7b438d56276 (diff) |
refactor: Remove NextJS from project
Diffstat (limited to 'src/components/Navbar.js')
-rw-r--r-- | src/components/Navbar.js | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..9b40882 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,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; |