diff --git a/Frontend/src/components/Sidebar.jsx b/Frontend/src/components/Sidebar.jsx index 1b252af..540fe82 100644 --- a/Frontend/src/components/Sidebar.jsx +++ b/Frontend/src/components/Sidebar.jsx @@ -1,21 +1,25 @@ -import { Link } from "react-router-dom"; -import { toast } from 'react-hot-toast'; -import { useNavigate } from 'react-router-dom'; +import { useState, useEffect, useRef } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import { toast } from "react-hot-toast"; + const Sidebar = () => { + const navigate = useNavigate(); // Hook for programmatic navigation + const [userMenuOpen, setUserMenuOpen] = useState(false); + const menuRef = useRef(); - const navigate = useNavigate(); // Hook for programmatic navigation - + // Show loading toast and perform logout const handleLogout = () => { - // Show loading toast const loadingToast = toast.loading("Logging out..."); // Simulate a delay (for example, network request) setTimeout(() => { // Remove the token from localStorage - localStorage.removeItem('token'); // Adjust the key if necessary + localStorage.removeItem("token"); + localStorage.removeItem("username"); + localStorage.removeItem("expiresIn"); // Redirect user to the homepage - navigate('/'); + navigate("/"); // Show success toast after logout toast.update(loadingToast, { @@ -24,44 +28,44 @@ const Sidebar = () => { isLoading: false, autoClose: 2000, }); - }, 1500); // Simulate a 1.5 second delay before showing success + }, 1500); }; + // Close dropdown on outside click + useEffect(() => { + const handleClickOutside = (e) => { + if (menuRef.current && !menuRef.current.contains(e.target)) { + setUserMenuOpen(false); + } + }; + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, []); + return ( <> - + @@ -255,4 +150,4 @@ const Sidebar = () => { ); }; -export default Sidebar; \ No newline at end of file +export default Sidebar;