diff --git a/components/NavigationBar.tsx b/components/NavigationBar.tsx index 057d27b..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 ( ); diff --git a/components/UserIcon.tsx b/components/UserIcon.tsx index 6286d56..d9c3a6a 100644 --- a/components/UserIcon.tsx +++ b/components/UserIcon.tsx @@ -1,31 +1,119 @@ +"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(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 ( - - +
+ 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`} + > + + + + +
+ - - - + +
+ +

+ Hola José Carlos! +

+
+
+
+ + {({ active }) => ( + + Ir a perfil + + )} + + + {({ active }) => ( + + )} + +
+
+ {" "} + + {({ active }) => ( + + )} + +
+
+
+ ); }; 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 164a45e..62db8d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,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" @@ -62,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", @@ -85,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" }, @@ -106,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", @@ -142,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" @@ -169,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", @@ -203,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", @@ -308,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": { @@ -599,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", @@ -746,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" } @@ -779,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": "*", @@ -789,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": "*" @@ -807,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": "*", @@ -1457,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", @@ -1611,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", @@ -1807,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": { @@ -4382,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", @@ -5229,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", @@ -5428,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",