From 81ee35aa78872f4d24e14388cb08b8ff5e5d816e Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Thu, 18 Jan 2024 00:52:43 -0400
Subject: [PATCH] Feat: implementation of user options -the user can see which
 email is in session -has special options -option dropdown

---
 src/components/Navbar/Dropdown.jsx | 143 +++++++++++++++++++++++++++++
 src/components/Navbar/Navbar.jsx   |  54 +----------
 2 files changed, 148 insertions(+), 49 deletions(-)
 create mode 100644 src/components/Navbar/Dropdown.jsx

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 (
+    <div className="relative z-50" ref={dropdownRef}>
+      <button
+        className="flex items-center p-2 text-sm text-gray-600 bg-white border border-transparent rounded-md focus:border-blue-500 focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:text-white dark:bg-gray-800 focus:outline-none"
+        onClick={toggleMenu}
+      >
+        <span className="mx-1 text-sm font-semibold ">
+        <FontAwesomeIcon icon={faUser} /> {Cookies.get("username")}
+        </span>
+        <svg
+          className="w-5 h-5 mx-1"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 15.713L18.01 9.70299L16.597 8.28799L12 12.888L7.40399 8.28799L5.98999 9.70199L12 15.713Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </button>
+
+      <div
+        className={`absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800${
+          isMenuOpen ? " visible opacity-100" : " invisible opacity-0"
+        }`}
+      >
+        <Link
+          to="#"
+          onClick={handleMenuItemClick}
+          className="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+        >
+          <div className="mx-1">
+            <h1 className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+            <FontAwesomeIcon icon={faUser} /> {Cookies.get("username")}
+            </h1>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {Cookies.get("email")}
+            </p>
+          </div>
+        </Link>
+
+        <hr className="border-gray-200 dark:border-gray-700" />
+
+        {!hideHomeLink &&
+          !isAdminPage &&
+          !isFormPage &&
+          !userListPage &&
+          !isSubscribePage &&
+          !isDetailPage && (
+            <Link
+              to="/subscription"
+              onClick={handleMenuItemClick}
+              className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+            >
+              Subscribe
+            </Link>
+          )}
+
+        {isHomePage && (
+          <Link
+            to="/contact"
+            onClick={handleMenuItemClick}
+            className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+          >
+            Support
+          </Link>
+        )}
+
+        <hr className="border-gray-200 dark:border-gray-700" />
+        {!isLoginPage && (
+          <div className="relative" onClick={() => setIsMenuOpen(false)}>
+            <button
+              className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+              onClick={handleLogout}
+            >
+              {Cookies.get("token") ? "Logout" : "Login"}{" "}
+              <FontAwesomeIcon icon={faSignOutAlt} />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+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 (
     <header className="antialiased bg-white dark-mode:bg-gray-900">
-      <nav className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
+      <nav className="w-full  text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
         <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8 ">
           <div className="flex flex-row items-center justify-between p-4">
             <Link
@@ -74,7 +62,7 @@ const Navbar = () => {
             </button>
           </div>
           <nav
-            className={`flex-col flex-grow ${
+            className={`flex-col z-50 flex-grow ${
               open ? "flex" : "hidden"
             } pb-4 md:pb-0 md:flex md:justify-end md:flex-row navbar-transition animate-flip-down duration-700`}
           >
@@ -90,19 +78,6 @@ const Navbar = () => {
                   Home
                 </Link>
               )}
-            {!hideHomeLink &&
-              !isAdminPage &&
-              !isFormPage &&
-              !userListPage &&
-              !isSubscribePage &&
-              !isDetailPage && (
-                <Link
-                  to="/subscription"
-                  className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
-                >
-                  Subscribe
-                </Link>
-              )}
 
             {!isHomePage && isAdminPage && (
               <Link
@@ -118,7 +93,7 @@ const Navbar = () => {
               !isSubscribePage &&
               location.pathname !== "/contact" &&
               !isDetailPage &&
-              !isEmailPage && !isConfirmPage&& (
+              !isEmailPage && (
                 <Link
                   to="/admin"
                   className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
@@ -135,26 +110,7 @@ const Navbar = () => {
                 Users List
               </Link>
             )}
-
-            {isHomePage && (
-              <Link
-                to="/contact"
-                className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
-              >
-                Contact
-              </Link>
-            )}
-            {!isLoginPage && (
-              <div className="relative" onClick={() => setOpen(false)}>
-                <button
-                  className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline  "
-                  onClick={handleLogout}
-                >
-                  {Cookies.get("token") ? "Logout" : "Login"}{" "}
-                  <FontAwesomeIcon icon={faSignOutAlt} />
-                </button>
-              </div>
-            )}
+          <Dropdown />
           </nav>
         </div>
       </nav>