From f0e8627454a93580954a6cc60cc2b491e7132df2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Carlos=20S=C3=A1nchez?= <a01174050@tec.mx>
Date: Thu, 4 Apr 2024 13:00:16 -0600
Subject: [PATCH 1/2] profile dropdown done

---
 components/NavigationBar.tsx     |  12 +-
 components/SearchBar.tsx         |  40 ++++++-
 components/UserIcon.tsx          | 118 ++++++++++++++++---
 components/UserProfileButton.tsx |   1 -
 package-lock.json                | 191 ++++++++++++++++++-------------
 package.json                     |   1 +
 6 files changed, 252 insertions(+), 111 deletions(-)

diff --git a/components/NavigationBar.tsx b/components/NavigationBar.tsx
index 0f97fb7..bae982d 100644
--- a/components/NavigationBar.tsx
+++ b/components/NavigationBar.tsx
@@ -1,29 +1,23 @@
 "use client";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import PIPIcon from "./PIPIcon";
 import DashboardIcon from "./DashboardIcon";
 import UserIcon from "./UserIcon";
 import SearchBar from "./SearchBar";
 import Notifications from "./Notifications";
-import { useClerk } from "@clerk/nextjs";
 
 const NavigationBar = () => {
   const pathname = usePathname();
-  const { signOut } = useClerk();
-  const router = useRouter();
 
   return (
     <nav className="mx-8 mt-10 flex items-center justify-between bg-bone">
       <h1 className="text-3xl font-bold text-primary">FEEDBACK FLOW</h1>
       <div className="flex flex-row gap-5 p-1">
-        <button onClick={() => signOut(() => router.push("/sign-in"))}>
-          sign out
-        </button>
         <PIPIcon path="/pip" currentPath={pathname} />
         <DashboardIcon path="/dashboard" currentPath={pathname} />
-        <UserIcon path="/profile" currentPath={pathname} />
-        <SearchBar placeholder="Search Co-workers ..." />
+        <SearchBar placeholder="Search Co-workers ..." expanded={false} />
         <Notifications />
+        <UserIcon path="/profile" currentPath={pathname} />
       </div>
     </nav>
   );
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index 3514e9c..58d3e74 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -1,9 +1,15 @@
+"use client";
+
+import { useState } from "react";
+
 interface SearchBarInterface {
   placeholder: string;
+  expanded?: boolean;
 }
 
-const SearchBar = ({ placeholder }: SearchBarInterface) => {
-  return (
+const SearchBar = ({ placeholder, expanded = true }: SearchBarInterface) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  return expanded ? (
     <div className="flex h-10 w-64 items-center rounded-full bg-white drop-shadow-lg">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -27,6 +33,36 @@ const SearchBar = ({ placeholder }: SearchBarInterface) => {
         className=" h-full w-4/6 rounded-full text-sm text-primary placeholder-primary focus:outline-none"
       />
     </div>
+  ) : (
+    <div
+      className={`flex items-center overflow-hidden rounded-full bg-white p-2 drop-shadow-lg transition-all duration-700 ${isExpanded ? "w-64" : "w-10"}`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+        stroke="currentColor"
+        className="h-6 w-6 cursor-pointer text-primary"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+        />
+      </svg>
+      <div
+        className={`transform transition-transform duration-700 ${isExpanded ? "-translate-x-0" : "hidden -translate-x-full"}`}
+      >
+        <input
+          name="search"
+          type="text"
+          placeholder={placeholder}
+          className="ml-2 h-full w-full rounded-full text-sm text-primary placeholder-primary focus:outline-none"
+        />
+      </div>
+    </div>
   );
 };
 
diff --git a/components/UserIcon.tsx b/components/UserIcon.tsx
index 6286d56..23eeeae 100644
--- a/components/UserIcon.tsx
+++ b/components/UserIcon.tsx
@@ -1,31 +1,111 @@
+"use client";
+import { Menu, Transition } from "@headlessui/react";
 import Link from "next/link";
+import { Fragment, useEffect, useState } from "react";
+import { useClerk } from "../node_modules/@clerk/nextjs";
+import { useRouter } from "next/navigation";
 
 interface UserIconInterface {
   path: string;
   currentPath: string;
 }
 const UserIcon = ({ path, currentPath }: UserIconInterface) => {
-  const isActive = currentPath === path;
+  const onSite = currentPath === path;
+  const [isClicked, setIsClicked] = useState<boolean>(false);
+  const { signOut } = useClerk();
+  const router = useRouter();
+  const handleSignOut = () => {
+    signOut(() => router.push("/sign-in"));
+  }
+
+  useEffect(() => {
+    const onCLickOutsideButton = (e: MouseEvent) => {
+      if (!(e.target as HTMLElement).closest('.group')) {
+        setIsClicked(false)
+      }
+    }
+    document.addEventListener('click', onCLickOutsideButton)
+    return () => document.removeEventListener('click', onCLickOutsideButton)
+  }, [])
+  
   return (
-    <Link
-      href="/profile"
-      className={`${isActive ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={1.5}
-        stroke="currentColor"
-        className={`${isActive ? "text-white" : "text-primary"} h-6 w-6 `}
+    <Menu as="div" className="relative inline-block text-left">
+    <div>
+      <Menu.Button
+        onClick={() => setIsClicked(!isClicked)}
+        className={`${(onSite || isClicked) ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
       >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-        />
-      </svg>
-    </Link>
+      <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className={`${(onSite || isClicked) ? "text-white" : "text-primary"} h-6 w-6 `}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+          />
+        </svg>
+      </Menu.Button>
+    </div>
+    <Transition
+      as={Fragment}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+    >
+      <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
+        <div className="px-1 py-1 ">
+          <Menu.Item >
+            <p className="mx-auto items-center px-2 py-2 text-sm">Hola José Carlos!</p>
+          </Menu.Item>
+        </div>
+        <div className="px-1 py-1 flex flex-col gap-1">
+          <Menu.Item disabled={onSite}>
+            {({ active }) => (
+              <Link
+                href="/profile"
+              className={`${
+                  (active) ? 'bg-primary/75 text-white' : onSite ? "bg-primary text-white" : 'text-gray-900'
+                }  group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+              >
+                Ir a perfil
+              </Link>
+            )}
+          </Menu.Item>
+          <Menu.Item>
+            {({ active }) => (
+              <button
+                className={`${
+                  active ? 'bg-primary/75 text-white' : 'text-gray-900'
+                } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+              >
+                Cambiar tema
+              </button>
+            )}
+          </Menu.Item>
+        </div>
+        <div className="px-1 py-1" onClick={handleSignOut}>          <Menu.Item>
+            {({ active }) => (
+              <button
+                className={`${
+                  active ? 'bg-red-700 text-white' : 'text-gray-900'
+                } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+              >
+                Cerrar sesión
+              </button>
+            )}
+          </Menu.Item>
+        </div>
+      </Menu.Items>
+    </Transition>
+  </Menu>
   );
 };
 export default UserIcon;
diff --git a/components/UserProfileButton.tsx b/components/UserProfileButton.tsx
index 4a1cb97..43885a7 100644
--- a/components/UserProfileButton.tsx
+++ b/components/UserProfileButton.tsx
@@ -1,5 +1,4 @@
 import Image from "next/image";
-import Link from "next/link";
 
 interface UserProfileButtonProps {
   name?: string;
diff --git a/package-lock.json b/package-lock.json
index ed72cda..62db8d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@clerk/nextjs": "^4.29.10",
+        "@headlessui/react": "^1.7.18",
         "next": "14.1.4",
         "react": "^18",
         "react-dom": "^18"
@@ -49,9 +50,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
-      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -61,11 +62,11 @@
       }
     },
     "node_modules/@clerk/backend": {
-      "version": "0.38.4",
-      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-0.38.4.tgz",
-      "integrity": "sha512-Cp/vcuFqo3VsoBXWEWONhlzK5gXB3RDBImc5XgA4hvTSDAq7vvn+WYh/ya1eeVZ8g1LMaRx2Wl2OFml3zjGWJA==",
+      "version": "0.38.5",
+      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-0.38.5.tgz",
+      "integrity": "sha512-SYdJAQt4KXmdo7gcaC747cf6KYthSigosmBLqS6aeq4SinBbZmfmgEKL80/oInp//j2+kmZglSazyg6W2NJr/A==",
       "dependencies": {
-        "@clerk/shared": "1.4.0",
+        "@clerk/shared": "1.4.1",
         "@clerk/types": "3.63.0",
         "@peculiar/webcrypto": "1.4.1",
         "@types/node": "16.18.6",
@@ -84,17 +85,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.6.tgz",
       "integrity": "sha512-vmYJF0REqDyyU0gviezF/KHq/fYaUbFhkcNbQCuPGFQj6VTbXuHZoxs/Y7mutWe73C8AC6l9fFu8mSYiBAqkGA=="
     },
-    "node_modules/@clerk/backend/node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
-    },
     "node_modules/@clerk/clerk-react": {
-      "version": "4.30.8",
-      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-4.30.8.tgz",
-      "integrity": "sha512-MehccfniWs2v7WSx4qGjJYxL+jtnsK6sETrzBuWctb7rLbvv4jDqjalhXbCm8YTV4qG19jHZl/WNsHOXSzBc7Q==",
+      "version": "4.30.9",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-4.30.9.tgz",
+      "integrity": "sha512-UWY+XmpbKjkABgmyfy2FUiTQQiN8QSdzyswPoTO9QyosXMZZp+vo/UhVor5V2kIeBoPibyW01oG/Nor2l0a7sA==",
       "dependencies": {
-        "@clerk/shared": "1.4.0",
+        "@clerk/shared": "1.4.1",
         "@clerk/types": "3.63.0",
         "tslib": "2.4.1"
       },
@@ -105,18 +101,13 @@
         "react": ">=16"
       }
     },
-    "node_modules/@clerk/clerk-react/node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
-    },
     "node_modules/@clerk/clerk-sdk-node": {
-      "version": "4.13.12",
-      "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-4.13.12.tgz",
-      "integrity": "sha512-6OluVdh13OwOVk5m+Zgfwph1B/1Zz3AzBepuZubdPmI2r0c1YVOuo/09WJiBRZdglkoIcS0868ZRBsZMrPJDLQ==",
+      "version": "4.13.13",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-4.13.13.tgz",
+      "integrity": "sha512-/VxKdAKN9vdvF9uk+YwFFA8H/BTXkCsHPAPIDh//bHnFFl/qu/cl66KMsQcmWdG72gwFbUeOjJyIXEZ83P6LLw==",
       "dependencies": {
-        "@clerk/backend": "0.38.4",
-        "@clerk/shared": "1.4.0",
+        "@clerk/backend": "0.38.5",
+        "@clerk/shared": "1.4.1",
         "@clerk/types": "3.63.0",
         "@types/cookies": "0.7.7",
         "@types/express": "4.17.14",
@@ -141,20 +132,15 @@
         "node": ">=8"
       }
     },
-    "node_modules/@clerk/clerk-sdk-node/node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
-    },
     "node_modules/@clerk/nextjs": {
-      "version": "4.29.10",
-      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.29.10.tgz",
-      "integrity": "sha512-nu8tIzZxxwqFYupBp66BSYSp+qAEUvGUFJ1eAqvgQjOUWh+rElQTfOMI0sm3hOX85sZv04WKA9hiAT93qLILsg==",
-      "dependencies": {
-        "@clerk/backend": "0.38.4",
-        "@clerk/clerk-react": "4.30.8",
-        "@clerk/clerk-sdk-node": "4.13.12",
-        "@clerk/shared": "1.4.0",
+      "version": "4.29.11",
+      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.29.11.tgz",
+      "integrity": "sha512-pAL/AO1ss10kiP8IZnl116wb53tsdRv3HSp3XKJCGgcg8xd0hmx/eeVHzYoLC8Jym5P0Lwm9JjrtLwnVeIz9Zw==",
+      "dependencies": {
+        "@clerk/backend": "0.38.5",
+        "@clerk/clerk-react": "4.30.9",
+        "@clerk/clerk-sdk-node": "4.13.13",
+        "@clerk/shared": "1.4.1",
         "@clerk/types": "3.63.0",
         "path-to-regexp": "6.2.1",
         "tslib": "2.4.1"
@@ -168,15 +154,10 @@
         "react-dom": "^17.0.2 || ^18.0.0-0"
       }
     },
-    "node_modules/@clerk/nextjs/node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
-    },
     "node_modules/@clerk/shared": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-1.4.0.tgz",
-      "integrity": "sha512-LANWfdw3n7lCN90oY+myuCN74CfGgBQE/T11ry/bTSNVqUxXiYaUlfu5Fkp0GsR4icYiA6NRyROFmYdYZfBMAA==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-1.4.1.tgz",
+      "integrity": "sha512-3rlZy0Hadnb1dw6x+4MGEC7dpZLlIVY3mZTwWRRS4CILWowVAccwfW84paN2XNlM12lJgMc+w66WNdw19XFtpg==",
       "dependencies": {
         "glob-to-regexp": "0.4.1",
         "js-cookie": "3.0.1",
@@ -202,11 +183,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@clerk/types/node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -263,6 +239,22 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.18",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
+      "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+      "dependencies": {
+        "@tanstack/react-virtual": "^3.0.0-beta.60",
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -291,9 +283,9 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
-      "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
     "node_modules/@isaacs/cliui": {
@@ -582,6 +574,11 @@
         "tslib": "^2.6.2"
       }
     },
+    "node_modules/@peculiar/asn1-schema/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/@peculiar/json-schema": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@peculiar/json-schema/-/json-schema-1.1.12.tgz",
@@ -632,6 +629,31 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
+      "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
+      "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -704,9 +726,9 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
     },
     "node_modules/@types/node": {
-      "version": "20.12.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz",
-      "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==",
+      "version": "20.12.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz",
+      "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -737,9 +759,9 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.73",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
-      "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
+      "version": "18.2.74",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.74.tgz",
+      "integrity": "sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -747,9 +769,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.23",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.23.tgz",
-      "integrity": "sha512-ZQ71wgGOTmDYpnav2knkjr3qXdAFu0vsk8Ci5w3pGAIdj7/kKAyn+VsQDhXsmzzzepAiI9leWMmubXz690AI/A==",
+      "version": "18.2.24",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.24.tgz",
+      "integrity": "sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -765,9 +787,9 @@
       }
     },
     "node_modules/@types/serve-static": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.6.tgz",
-      "integrity": "sha512-xkChxykiNb1X2YBevPIhQhNU9m9M7h9e2gDsmePAP2kNqhOvpKOrZWOCzq2ERQqfNFzlzHG2bdM0u3z5x+gQgg==",
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
+      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
       "dependencies": {
         "@types/http-errors": "*",
         "@types/node": "*",
@@ -1415,9 +1437,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001603",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz",
-      "integrity": "sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==",
+      "version": "1.0.30001605",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz",
+      "integrity": "sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1569,10 +1591,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -1765,9 +1786,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.722",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.722.tgz",
-      "integrity": "sha512-5nLE0TWFFpZ80Crhtp4pIp8LXCztjYX41yUcV6b+bKR2PqzjskTMOOlBi1VjBHlvHwS+4gar7kNKOrsbsewEZQ==",
+      "version": "1.4.726",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.726.tgz",
+      "integrity": "sha512-xtjfBXn53RORwkbyKvDfTajtnTp0OJoPOIBzXvkNbb7+YYvCHJflba3L7Txyx/6Fov3ov2bGPr/n5MTixmPhdQ==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -4340,6 +4361,11 @@
         "tslib": "^2.6.1"
       }
     },
+    "node_modules/pvtsutils/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/pvutils": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.3.tgz",
@@ -5187,9 +5213,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -5386,6 +5412,11 @@
         "tslib": "^2.6.2"
       }
     },
+    "node_modules/webcrypto-core/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 50d107f..513028a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^4.29.10",
+    "@headlessui/react": "^1.7.18",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18"

From 3963691e40b5044525e00dd2d97136f238e753c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Carlos=20S=C3=A1nchez?= <a01174050@tec.mx>
Date: Thu, 4 Apr 2024 13:02:30 -0600
Subject: [PATCH 2/2] fixed prettier

---
 components/UserIcon.tsx | 174 +++++++++++++++++++++-------------------
 1 file changed, 91 insertions(+), 83 deletions(-)

diff --git a/components/UserIcon.tsx b/components/UserIcon.tsx
index 23eeeae..d9c3a6a 100644
--- a/components/UserIcon.tsx
+++ b/components/UserIcon.tsx
@@ -16,96 +16,104 @@ const UserIcon = ({ path, currentPath }: UserIconInterface) => {
   const router = useRouter();
   const handleSignOut = () => {
     signOut(() => router.push("/sign-in"));
-  }
+  };
 
   useEffect(() => {
     const onCLickOutsideButton = (e: MouseEvent) => {
-      if (!(e.target as HTMLElement).closest('.group')) {
-        setIsClicked(false)
+      if (!(e.target as HTMLElement).closest(".group")) {
+        setIsClicked(false);
       }
-    }
-    document.addEventListener('click', onCLickOutsideButton)
-    return () => document.removeEventListener('click', onCLickOutsideButton)
-  }, [])
-  
+    };
+    document.addEventListener("click", onCLickOutsideButton);
+    return () => document.removeEventListener("click", onCLickOutsideButton);
+  }, []);
+
   return (
     <Menu as="div" className="relative inline-block text-left">
-    <div>
-      <Menu.Button
-        onClick={() => setIsClicked(!isClicked)}
-        className={`${(onSite || isClicked) ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
-      >
-      <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className={`${(onSite || isClicked) ? "text-white" : "text-primary"} h-6 w-6 `}
+      <div>
+        <Menu.Button
+          onClick={() => setIsClicked(!isClicked)}
+          className={`${onSite || isClicked ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
         >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-          />
-        </svg>
-      </Menu.Button>
-    </div>
-    <Transition
-      as={Fragment}
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
-    >
-      <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
-        <div className="px-1 py-1 ">
-          <Menu.Item >
-            <p className="mx-auto items-center px-2 py-2 text-sm">Hola José Carlos!</p>
-          </Menu.Item>
-        </div>
-        <div className="px-1 py-1 flex flex-col gap-1">
-          <Menu.Item disabled={onSite}>
-            {({ active }) => (
-              <Link
-                href="/profile"
-              className={`${
-                  (active) ? 'bg-primary/75 text-white' : onSite ? "bg-primary text-white" : 'text-gray-900'
-                }  group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-              >
-                Ir a perfil
-              </Link>
-            )}
-          </Menu.Item>
-          <Menu.Item>
-            {({ active }) => (
-              <button
-                className={`${
-                  active ? 'bg-primary/75 text-white' : 'text-gray-900'
-                } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-              >
-                Cambiar tema
-              </button>
-            )}
-          </Menu.Item>
-        </div>
-        <div className="px-1 py-1" onClick={handleSignOut}>          <Menu.Item>
-            {({ active }) => (
-              <button
-                className={`${
-                  active ? 'bg-red-700 text-white' : 'text-gray-900'
-                } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-              >
-                Cerrar sesión
-              </button>
-            )}
-          </Menu.Item>
-        </div>
-      </Menu.Items>
-    </Transition>
-  </Menu>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className={`${onSite || isClicked ? "text-white" : "text-primary"} h-6 w-6 `}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+            />
+          </svg>
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
+          <div className="px-1 py-1 ">
+            <Menu.Item>
+              <p className="mx-auto items-center px-2 py-2 text-sm">
+                Hola José Carlos!
+              </p>
+            </Menu.Item>
+          </div>
+          <div className="flex flex-col gap-1 px-1 py-1">
+            <Menu.Item disabled={onSite}>
+              {({ active }) => (
+                <Link
+                  href="/profile"
+                  className={`${
+                    active
+                      ? "bg-primary/75 text-white"
+                      : onSite
+                        ? "bg-primary text-white"
+                        : "text-gray-900"
+                  }  group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                >
+                  Ir a perfil
+                </Link>
+              )}
+            </Menu.Item>
+            <Menu.Item>
+              {({ active }) => (
+                <button
+                  className={`${
+                    active ? "bg-primary/75 text-white" : "text-gray-900"
+                  } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                >
+                  Cambiar tema
+                </button>
+              )}
+            </Menu.Item>
+          </div>
+          <div className="px-1 py-1" onClick={handleSignOut}>
+            {" "}
+            <Menu.Item>
+              {({ active }) => (
+                <button
+                  className={`${
+                    active ? "bg-red-700 text-white" : "text-gray-900"
+                  } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                >
+                  Cerrar sesión
+                </button>
+              )}
+            </Menu.Item>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
   );
 };
 export default UserIcon;