diff --git a/src/components/Navbar/Dropdown.jsx b/src/components/Navbar/Dropdown.jsx new file mode 100644 index 0000000..ca9bd27 --- /dev/null +++ b/src/components/Navbar/Dropdown.jsx @@ -0,0 +1,143 @@ +import React, { useState, useRef, useEffect } from "react"; +import { Link } from "react-router-dom"; +import { useRouteVariables } from "./Location"; +import useAuth from "../../hooks/useAuth"; +import Cookies from "js-cookie"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faSignOutAlt,faUser } from "@fortawesome/free-solid-svg-icons"; + +const Dropdown = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const dropdownRef = useRef(null); + const { + isHomePage, + isAdminPage, + hideHomeLink, + isFormPage, + userListPage, + isSubscribePage, + isDetailPage, + isLoginPage, + } = useRouteVariables(); + const { setAuth } = useAuth(); + + const handleLogout = () => { + setAuth({ roles: null, token: null }); + Cookies.remove("token"); + Cookies.remove("roles"); + window.location = "/login"; + }; + + const toggleMenu = () => { + setIsMenuOpen((prevIsMenuOpen) => !prevIsMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + const handleClickOutside = (event) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + closeMenu(); + } + }; + + const handleMenuItemClick = () => { + closeMenu(); + }; + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( +
+ + +
+ +
+

+ {Cookies.get("username")} +

+

+ {Cookies.get("email")} +

+
+ + +
+ + {!hideHomeLink && + !isAdminPage && + !isFormPage && + !userListPage && + !isSubscribePage && + !isDetailPage && ( + + Subscribe + + )} + + {isHomePage && ( + + Support + + )} + +
+ {!isLoginPage && ( +
setIsMenuOpen(false)}> + +
+ )} +
+
+ ); +}; + +export default Dropdown; diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 699bf96..96d7994 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,11 +1,8 @@ import React, { useState } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons"; import { Link } from "react-router-dom"; -import useAuth from "../../hooks/useAuth"; -import Cookies from "js-cookie"; import { useLocation } from "react-router-dom"; import { useRouteVariables } from "./Location"; +import Dropdown from "./Dropdown"; const Navbar = () => { const location = useLocation(); const { @@ -20,16 +17,7 @@ const Navbar = () => { isHomePage, isContactPage, isEmailPage, - isConfirmPage, } = useRouteVariables(); - const { setAuth } = useAuth(); - - const handleLogout = () => { - setAuth({ roles: null, token: null }); - Cookies.remove("token"); - Cookies.remove("roles"); - window.location = "/login"; - }; const [open, setOpen] = useState(false); @@ -42,7 +30,7 @@ const Navbar = () => { return (
-