From 1b30e9a47614858d77cdb100fad73ef3cbf4d2a5 Mon Sep 17 00:00:00 2001
From: Mohammed Junaid <mohammedjunaidj08@gmail.com>
Date: Sun, 13 Oct 2024 23:36:17 +0530
Subject: [PATCH 1/2] Added conditional logic to render Sign Out button for
 LoggedInUsers only

---
 src/Components/Menu.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/Components/Menu.js b/src/Components/Menu.js
index c493dd47..b1f7360a 100644
--- a/src/Components/Menu.js
+++ b/src/Components/Menu.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect, useMemo, useState} from "react";
 import "./Menu.css";
 import logo from "../img/logo.png";
 import { Link } from "react-router-dom";
@@ -22,6 +22,7 @@ function Menu() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(window.innerWidth < 524);
   const [showStopwatch, setShowStopwatch] = useState(false); // State to handle stopwatch visibility
+  const [isUserLoggedIn, setIsUserLoggedIn] = useState(localStorage.getItem('user') ? true : false);
 
   useEffect(() => {
     const handleResize = () => {
@@ -30,10 +31,12 @@ function Menu() {
 
     window.addEventListener("resize", handleResize);
 
+    const user = localStorage.getItem('user');
+    setIsUserLoggedIn(user ? true : false);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, [isUserLoggedIn]);
 
   const toggleSidebar = () => {
     setSidebarOpen(!sidebarOpen);
@@ -44,10 +47,8 @@ function Menu() {
   };
 
   const handleSignOut = () => {
-    console.log("User signed out");
-    setTimeout(() => {
-      // Handle any additional sign-out logic here
-    }, 3000);
+    localStorage.removeItem('user');
+    setIsUserLoggedIn(false);
   };
 
   const { theme } = useContext(ThemeContext)
@@ -122,12 +123,14 @@ function Menu() {
               <span className="tooltip" style={{ marginLeft: '10px', fontSize: '1.1rem', color: 'white' }}>Settings</span>
             </Link>
           </li>
-          <li style={{ padding: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
+          {isUserLoggedIn && (
+            <li style={{ padding: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
             <Link to="/" style={{ color: 'white', textDecoration: 'none', display: 'flex', alignItems: 'center' }}>
               <FaSignOutAlt size={30} />
-              <span className="tooltip" style={{ marginLeft: '10px', fontSize: '1.1rem', color: 'white' }}>Sign Out</span>
+              <span className="tooltip" style={{ marginLeft: '10px', fontSize: '1.1rem', color: 'white' }} onClick={handleSignOut}>SignOut</span>
             </Link>
           </li>
+          )}
         </ul>
       </div>
 

From 3e3a96a792a8036681aacd550d4914eb3a2ab54b Mon Sep 17 00:00:00 2001
From: Mohammed Junaid <mohammedjunaidj08@gmail.com>
Date: Sun, 13 Oct 2024 23:44:03 +0530
Subject: [PATCH 2/2] Added conditional logic to render Sign Out button for
 LoggedInUsers only

---
 src/Components/Menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Menu.js b/src/Components/Menu.js
index b1f7360a..ce734bc1 100644
--- a/src/Components/Menu.js
+++ b/src/Components/Menu.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useMemo, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import "./Menu.css";
 import logo from "../img/logo.png";
 import { Link } from "react-router-dom";