From 53132e64a84ad3f4369e91c56f46ea09a27f50ee Mon Sep 17 00:00:00 2001
From: Hari Dev <hariharidev5@gmail.com>
Date: Tue, 24 Dec 2024 11:33:20 +0530
Subject: [PATCH] fix: Modifications in dropdown and networkcard clickevent

---
 frontend/src/components/Dropdown.jsx    | 18 ++++++++++++++++--
 frontend/src/components/NetworkCard.jsx | 23 +++++++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Dropdown.jsx b/frontend/src/components/Dropdown.jsx
index 3e40df3..0efa236 100644
--- a/frontend/src/components/Dropdown.jsx
+++ b/frontend/src/components/Dropdown.jsx
@@ -1,18 +1,32 @@
-import React ,{useState}from "react";
+import React ,{useState , useEffect}from "react";
+import { useRef } from "react";
 import "tailwindcss/tailwind.css";
 
 const Dropdown = () => {
     const [visible, setVisible] = useState(false);
+    const dropdownRef = useRef(null);
     
+    // Function to handle the click event
     const handleClick = () => { setVisible(!visible); };
 
+    // Function to handle the click outside the dropdown
+    const handleClickOutside = (event) => { 
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target))
+             { setVisible(false); } }; 
+
+    // useEffect hook to add an event listener when the component mounts
+    useEffect(() => { 
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => { document.removeEventListener('mousedown', handleClickOutside); }; 
+    }, []);
+
     return (
     <div className="relative" id="profileDropdown">
     <button id="profileButton" className="flex items-center" onClick={handleClick}>
         <img src="https://via.placeholder.com/30" alt="Profile" className="rounded-full w-8 h-8 mr-2"/>
         <span className="text-gray-700 hidden md:inline">John Doe</span>
     </button>
-    <div id="dropdownMenu" className={`${visible ? 'block' : 'hidden'} space-y-4 absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg`}>
+    <div id="dropdownMenu" ref={dropdownRef} className={`${visible ? 'block' : 'hidden'} space-y-4 absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg`}>
         <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
         <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
         <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
diff --git a/frontend/src/components/NetworkCard.jsx b/frontend/src/components/NetworkCard.jsx
index de06668..e45c08d 100644
--- a/frontend/src/components/NetworkCard.jsx
+++ b/frontend/src/components/NetworkCard.jsx
@@ -1,7 +1,24 @@
-import React from 'react'
+import React ,{useState,useEffect,useRef} from 'react'
 import Userimage from "../assets/user.jpg"
 
 const NetworkCard = ({name,domain}) => {
+   const [visible, setVisible] = useState(false);
+       const dropdownRef = useRef(null);
+       
+       // Function to handle the click event
+       const handleClick = () => { setVisible(!visible); };
+   
+       // Function to handle the click outside the dropdown
+       const handleClickOutside = (event) => { 
+           if (dropdownRef.current && !dropdownRef.current.contains(event.target))
+                { setVisible(false); } }; 
+   
+       // useEffect hook to add an event listener when the component mounts
+       useEffect(() => { 
+           document.addEventListener('mousedown', handleClickOutside);
+           return () => { document.removeEventListener('mousedown', handleClickOutside); }; 
+       }, []);
+       
 return (
     <div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
         <div className="flex justify-end px-4 pt-4">
@@ -10,6 +27,8 @@ return (
                 data-dropdown-toggle="dropdown"
                 className="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
                 type="button"
+                ref={dropdownRef}
+                onClick={handleClick}
             >
                 <span className="sr-only">Open dropdown</span>
                 <svg
@@ -25,7 +44,7 @@ return (
             {/* <!-- Dropdown menu --> */}
             <div
                 id="dropdown"
-                className="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
+                className={` ${visible?'block':'hidden'} z-10 text-base absolute list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-32 dark:bg-gray-700`}
             >
                 <ul className="py-2" aria-labelledby="dropdownButton">
                     <li>