diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Navbar.js | 55 |
1 files changed, 34 insertions, 21 deletions
diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 27f37f0..5eec7ef 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -3,6 +3,11 @@ 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); @@ -22,6 +27,7 @@ const Navbar = () => { ]; 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 */} @@ -119,33 +125,40 @@ const Navbar = () => { </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"> + <div className="flex items-center space-x-3"> + <span className="w-5 h-5 text-gray-400"> <BellIcon /></span> + <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" /> + <span className="font-normal">{user.name}</span> + <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> + <span className="text-xs text-gray-600">{user.email}</span> + </div> </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> + <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; |