improve login ui/ux so login pops up from nav bar

app/globals.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Force scrollbar to always be visible so text doesn't move when navigating across pages*/
+body {
+  overflow-y: scroll;
+}

app/profile/page.tsx

@@ -46,8 +46,8 @@ const Page = () => {
 
     // Remove the token from local storage
     localStorage.removeItem("token");
-    // Redirect the user to the login page after logging out
-    window.location.href = "/loginPage";
+    // Redirect the user to the main page after logging out
+    window.location.href = "/";
     console.log("Logged out successfully");
   };
 

app/loginPage/page.tsx → components/login.tsx

@@ -1,12 +1,9 @@
 "use client";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   GoogleOAuthProvider,
   useGoogleLogin,
-  googleLogout,
-  TokenResponse,
 } from "@react-oauth/google";
-import { jwtDecode } from "jwt-decode";
 import axios from "axios";
 
 const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
@@ -53,28 +50,11 @@ const LoginComponent = () => {
     onError: (errorResponse) => console.error("Login Failed", errorResponse),
   });
 
-  // const handleLogout = () => {
-  //   googleLogout();
-  //   setUser(null);  // Clears the user state, effectively logging out the user
-  //   // Remove the token from local storage
-  //   localStorage.removeItem('token');
-  //   // Redirect the user to the login page
-  //   window.location.href = '/loginPage';
-  //   console.log('Logged out successfully');
-  // };
 
   return (
-    <div>
-      <button
-        onClick={() => handleLogin()}
-        className="hover:underline decoration-yellow-400 underline-offset-8 m-5 p-2 text-[#003C6C] font-medium text-xl"
-      >
-        Login with Google
+      <button onClick={() => handleLogin()}>
+        Account
       </button>
-      {/* <button onClick={handleLogout} className="hover:underline decoration-yellow-400 underline-offset-8 top-0 right-0 m-5 p-2 text-[#003C6C] font-medium text-xl">
-        Logout
-      </button> */}
-    </div>
   );
 };
 

components/navbar.tsx

@@ -1,15 +1,17 @@
 "use client";
-import React, { useContext } from "react";
-
-const checkLogin = () => {
-  if (!localStorage.getItem("token")) {
-    window.location.href = "/loginPage"; // Redirect to login page if not authenticated
-  } else {
-    window.location.href = "/profile"; // Redirect to profile page if authenticated
-  }
-};
+import React, { useState, useEffect } from "react";
+import LoginPage from './login'; // Used if not logged in
 
 export default function Navbar({ height }: { height: string }) {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    // Check if localStorage is available and if token exists
+    const token = localStorage.getItem("token");
+    setIsLoggedIn(!!token);
+  }, []);
+
+
   return (
     <nav className="bg-white fixed w-full  top-0 start-0  ">
       <div className="max-w-screen flex flex-wrap items-center justify-between mx-auto p-2.5">
@@ -34,10 +36,15 @@ export default function Navbar({ height }: { height: string }) {
               </a>
             </li>
             <li>
-              <a onClick={checkLogin} className="pl-4 pr-5">
-                Account
-              </a>
-              {/* pr-X dicates how far off right we want.  */}
+              {!isLoggedIn ? (
+                <a className="pl-4 pr-5">
+                <LoginPage />
+                </a>
+              ) : (
+                <a href="/profile" className="pl-4 pr-5">
+                  Account
+                </a>
+              )}
             </li>
             <li>
               <a href="/search" className="pl-4 pr-5"></a>