this repo has no description
Close pop up if clicked outside
+19
-2
+19
-2
app/components/Header/components/User.tsx
+19
-2
app/components/Header/components/User.tsx
···
1
1
"use client";
2
2
3
3
import Link from "next/link";
4
-
import { useState } from "react";
4
+
import { useEffect, useRef, useState } from "react";
5
5
import { RxAvatar } from "react-icons/rx";
6
6
7
7
const User = () => {
8
+
const ref = useRef<HTMLDivElement | null>(null);
8
9
const [showSettings, setShowSettings] = useState(false);
9
10
11
+
useEffect(() => {
12
+
const handleClickOutside = (event: MouseEvent) => {
13
+
if (ref.current && !ref.current.contains(event.target as Node)) {
14
+
setShowSettings(false);
15
+
}
16
+
};
17
+
18
+
document.addEventListener("mousedown", handleClickOutside);
19
+
20
+
return () => {
21
+
document.removeEventListener("mousedown", handleClickOutside);
22
+
};
23
+
}, []);
10
24
return (
11
25
<div className="flex-1">
12
26
<RxAvatar
···
15
29
size={48}
16
30
/>
17
31
{showSettings && (
18
-
<div className="absolute bg-[#30255C] flex h-24 items-center justify-center mt-2 right-0 rounded-lg top-full w-full">
32
+
<div
33
+
className="absolute bg-[#30255C] flex h-24 items-center justify-center mt-2 right-0 rounded-lg top-full w-full"
34
+
ref={ref}
35
+
>
19
36
<Link
20
37
className="hover:underline text-xl"
21
38
href="/login"