Logout button

[Krishna-Sri-Charan]

Fix: #85

1. Navbar.jsx – Dynamic Login/Logout

• Add logic to check if a user is logged in using localStorage.getItem("token").
• If the user is logged in:
  • Show “Logout” instead of “Login”.
  • On click → remove token and user from localStorage, then navigate to /login.
• If the user is not logged in:
  • Show “Login” button.
  • On click → navigate to /login.
• Apply this logic to both desktop navbar button and mobile dropdown menu button so the behavior stays consistent across devices.

Screeshot:

[Copilot]

Pull Request Overview

This PR implements dynamic login/logout functionality in the navbar and adds responsive layout improvements to the landing page. The navbar now shows "Logout" when a user is authenticated and "Login" when not, with proper token cleanup on logout.

• Added dynamic navbar authentication state with localStorage token checking
• Implemented logout functionality that clears user data and redirects to login
• Added redirect logic to prevent authenticated users from accessing the home page
• Updated landing page layout for better responsive design

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
client/src/components/common/Navbar.jsx	Implements dynamic login/logout button and authentication state management
client/src/pages/HomePage.jsx	Adds redirect logic for authenticated users
client/src/pages/LandingPage.jsx	Updates responsive layout and styling improvements

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The useEffect hook lacks proper indentation. It should be aligned with other top-level code in the component.

Suggested change

	useEffect(() => {
	const token = localStorage.getItem("token");
	if (token) {
	navigate("/landing", { replace: true });
	}
	}, [navigate]);
	useEffect(() => {
	const token = localStorage.getItem("token");
	if (token) {
	navigate("/landing", { replace: true });
	}
	}, [navigate]);

[Copilot]

The useEffect should listen for changes to localStorage to handle cases where the token might be modified outside this component. Consider adding a storage event listener or using a context/state management solution for authentication state.

Suggested change

	const token = localStorage.getItem("token");
	setIsLoggedIn(!!token);
	const checkToken = () => {
	const token = localStorage.getItem("token");
	setIsLoggedIn(!!token);
	};
	checkToken();
	const handleStorage = (event) => {
	if (event.key === "token") {
	checkToken();
	}
	};
	window.addEventListener("storage", handleStorage);
	return () => {
	window.removeEventListener("storage", handleStorage);
	};

[Krishna-Sri-Charan]

Fix: #72 also

[Krishna-Sri-Charan]

Fix: #130, #156, #146