Notes

import React, { useState } from "react";
import "./styles.css"; // Import the CSS file for styling

const Dropdown = () => {
const [isOpen, setIsOpen] = useState(false);

// Toggle the dropdown when the user icon is clicked
const toggleDropdown = () => {
setIsOpen(!isOpen);
};

// Close the dropdown if clicked outside
const closeDropdown = (e) => {
if (!e.target.closest(".user-icon") && !e.target.closest(".dropdown-content")) {
setIsOpen(false);
}
};

// Listen for clicks outside the dropdown to close it
React.useEffect(() => {
window.addEventListener("click", closeDropdown);
return () => {
window.removeEventListener("click", closeDropdown);
};
}, []);

return (
<div className="navbar">
{/* User Icon */}
<div className="user-icon" onClick={toggleDropdown}>
<i className="fas fa-user-circle"></i>
</div>

{/* Dropdown Menu */}
{isOpen && (
<div className="dropdown-content">
<a href="#">Account</a>
<a href="#">Log out</a>
</div>
)}
</div>
);
};

export default Dropdown;