Made Sign-Out button Functional

src/Components/Menu.css

@@ -166,3 +166,39 @@ menu ul li:hover .tooltip {
     cursor: pointer;
   }
 }
+
+.sign-out-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  background: rgb(25, 22, 44);
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  z-index: 1000;
+  border-radius: 10px;
+}
+
+.sign-out-popup button {
+  margin: 5px;
+}
+
+.success-message {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 10px;
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.1);
+  z-index: 10000;
+}
+
+.buttonSignOut{
+  display: flex;
+  margin-top: 10%;
+  justify-content: center;
+}

src/Components/Menu.js

@@ -2,8 +2,6 @@ import React, { useEffect, useState } from "react";
 import "./Menu.css";
 import logo from "../img/logo.png";
 import { Link } from "react-router-dom";
-
-
 import {
   FaDelicious,
   FaShoppingCart,
@@ -19,7 +17,6 @@ import {
 } from "react-icons/fa";
 
 function Menu() {
-
   let toggle = false;
 
   useEffect(() => {
@@ -35,56 +32,96 @@ function Menu() {
     mainMenuLi.forEach((n) => n.addEventListener("click", changeActive));
   }, []);
 
-  const showDropDown = () => {
-    if(!toggle){
-      document.getElementById("mainMenu").style.display = "flex";
-      document.getElementById("lastMenu").style.display = "flex";
-      toggle = true;
-    } else{
-      document.getElementById("mainMenu").style.display = "none";
-      document.getElementById("lastMenu").style.display = "none";
-      toggle = false;
-    }
-  };
-
   const [isMobile, setIsMobile] = useState(window.innerWidth < 524);
+  const [showSignOutPopup, setShowSignOutPopup] = useState(false);
+  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < 524);
     };
 
     window.addEventListener('resize', handleResize);
-    // Clean up the event listener on component unmount
     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
 
-  return (
+  const showDropDown = () => {
+    if (!toggle) {
+      document.getElementById("mainMenu").style.display = "flex";
+      document.getElementById("lastMenu").style.display = "flex";
+      toggle = true;
+    } else {
+      document.getElementById("mainMenu").style.display = "none";
+      document.getElementById("lastMenu").style.display = "none";
+      toggle = false;
+    }
+  };
 
-    <menu className="fromLeft">
-    <Link href='/'>
-      <img src={logo} alt='icon' className="logo" id='logo' onClick={isMobile ? showDropDown : null}
-        style={{ cursor: isMobile ? 'pointer' : 'default' }}/>
-    </Link>
-
-      <ul className="fromTop" id="mainMenu">
-        <Icon icon={<FaList />} tooltip="My projects" href="/projects"/>
-        <Icon icon={<FaDelicious />} tooltip="Delicious" href="/" />
-        <Icon icon={<FaShoppingCart />} tooltip="Cart" href="/cart" />
-        <Icon icon={<FaWallet />} tooltip="Wallet" href="/" />
-        <Icon icon={<FaChartLine />} tooltip="Trending" href="/" />
-        <Icon icon={<FaRegClock />} tooltip="Speed" href="/" />
-      </ul>
-
-      <ul className='lastMenu' id='lastMenu'>
-        <Link to='/settings'>
-          <Icon icon={<FaCog />} tooltip='Settings' />
+  const handleSignOut = () => {
+    // Simulate sign-out logic here (e.g., clearing tokens, redirecting to login)
+    console.log("User signed out");
+    setShowSignOutPopup(false);
+    setShowSuccessMessage(true);
+
+    // Hide success message after 3 seconds
+    setTimeout(() => {
+      setShowSuccessMessage(false);
+    }, 3000);
+  };
+
+  return (
+    <div>
+      <menu className="fromLeft">
+        <Link to='/'>
+          <img
+            src={logo}
+            alt='icon'
+            className="logo"
+            id='logo'
+            onClick={isMobile ? showDropDown : null}
+            style={{ cursor: isMobile ? 'pointer' : 'default' }}
+          />
         </Link>
-        <Icon icon={<FaSignOutAlt />} tooltip='Sign Out' href='/' />
-      </ul>
-    </menu>
+
+        <ul className="fromTop" id="mainMenu">
+          <Icon icon={<FaList />} tooltip="My projects" href="/projects" />
+          <Icon icon={<FaDelicious />} tooltip="Delicious" href="/" />
+          <Icon icon={<FaShoppingCart />} tooltip="Cart" href="/cart" />
+          <Icon icon={<FaWallet />} tooltip="Wallet" href="/" />
+          <Icon icon={<FaChartLine />} tooltip="Trending" href="/" />
+          <Icon icon={<FaRegClock />} tooltip="Speed" href="/" />
+        </ul>
+
+        <ul className='lastMenu' id='lastMenu'>
+          <Link to='/settings'>
+            <Icon icon={<FaCog />} tooltip='Settings' />
+          </Link>
+          <li onClick={() => setShowSignOutPopup(true)}>
+            <a href="#">
+              <FaSignOutAlt />
+              <span className='tooltip'>Sign Out</span>
+            </a>
+          </li>
+        </ul>
+      </menu>
+
+      {showSignOutPopup && (
+        <div className="sign-out-popup">
+          <p>Are you sure you want to sign out?</p>
+          <div className="buttonSignOut">
+            <button onClick={handleSignOut}>Yes</button>
+            <button onClick={() => setShowSignOutPopup(false)}>No</button></div>
+        </div>
+      )}
+
+      {showSuccessMessage && (
+        <div className="success-message">
+          Successfully signed out
+        </div>
+      )}
+    </div>
   );
 }
 

src/Components/TopContainer.css

@@ -18,7 +18,7 @@
   position: sticky;
   top: 0;
   gap: 0.5rem;
-  z-index: 99999;
+  z-index: 999;
 }
 .profileContainer .go-pro-btn {
   padding: 10px 10px; /* Adjust padding to change the button size */