dynamic header to switch users

src/App.jsx

@@ -16,7 +16,7 @@ import Charts from "./Pages/Charts"
 import Profile from "./Pages/Profile"
 import Album from "./Pages/Album"
 import Landing from "./Pages/Landing/Landing"
-import LogIn from "./Pages/LogIn"
+import Login from "./Pages/Login"
 
 // first router system
 /*
@@ -71,7 +71,15 @@ const router = createBrowserRouter([
   },
   {
     path: '/login',
-    element: <LogIn></LogIn>
+    element: <Login></Login>,
+  },
+  {
+    path: '/logout',
+    element: <Login/>
+  },
+  {
+    path: '/signup',
+    element: <Login/>
   },
   //{
   //  path: "*",

src/Components/Header.jsx

@@ -1,15 +1,31 @@
 //import { Link } from "react-router-dom"
-import { NavLink } from "react-router-dom"
+import { NavLink, useLocation } from "react-router-dom"
+import { useCookies } from "react-cookie"
 
 function Header(){
+	const [userCookie, setUserCookie] = useCookies(["user"])
+	const location = useLocation()
+
+	const profilePage = <div aria-label="navigate to the profile page" role="navigation"><NavLink to="/profile">Profile</NavLink></div>
+	const loginPage = <div aria-label="navigate to the log in page" role="navigation"><NavLink to="/login">Log In</NavLink></div>
+	const switchUser = <div aria-label="navigate to switch user" role="navigation"><NavLink to="/login">Switch User</NavLink></div>
+
+	let check = ""
+
+	//let check = userCookie.user == "" || userCookie.user == "guest" ? loginPage : profilePage
+	if(check = userCookie.user == "" || userCookie.user == "guest")
+		check = loginPage
+	else if(location.pathname == "/profile")
+		check = switchUser
+	else 
+		check = profilePage
+
 	return(<>
 		<div className="Header">
 			<div aria-label="navigate to the charts" role="navigation"><NavLink to="/charts">Charts</NavLink></div>
 			<div aria-label="navigate to the search page" role="navigation"><NavLink to="/">Search</NavLink></div>
 			<div aria-label="navigate to the about us" role="navigation"><NavLink to="/landing">Landing</NavLink></div>
-			<div aria-label="navigate to the profile page" role="navigation"><NavLink to="/profile">Profile</NavLink></div>
-
-
+			{ check }
 		</div>
 
 	</>)

src/Pages/LogIn.jsx

@@ -1,5 +1,6 @@
 import { Form } from "react-router-dom";
 import { useCookies } from "react-cookie";
+import { Helmet } from "react-helmet";
 
 import Header from "@/Components/Header";
 
@@ -14,7 +15,7 @@ import aaa from './CSS/search.css?inline'
 
 
 
-export default function LogIn(){
+export default function Login(){
 	const [user, setUser] = useCookies(["user"])
 
 	function submitting(event){
@@ -36,10 +37,10 @@ export default function LogIn(){
 
 			<button type="submit" onClick={submitting}>Submit</button>
 		</Form>
-
-
-
 
-
+		<Helmet>
+			<title>Log In</title>
+			<meta name="description" content="Log In to Add Songs to Charts" />
+		</Helmet>	
 	</>)
 }

src/Pages/Profile.jsx

@@ -1,6 +1,7 @@
 import Header from "../Components/Header"
 import { useEffect, useState } from "react"
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import { useCookies } from "react-cookie";
 
 import { collection, doc, getDocs, where, query, orderBy, limit, deleteDoc } from "firebase/firestore";
@@ -14,6 +15,14 @@ import "./CSS/no_page.css?inline"
 import aaa from './CSS/search.css?inline' 
 
 export default function Profile(){
+	let [userCookie, setUser] = useCookies(["user"])
+	const navigate = useNavigate()
+	useEffect(()=>{
+		if(userCookie.user=="guest" || userCookie.user == ""){
+			navigate("/login")
+		}
+	}, [])
+
 	const key = import.meta.env.VITE_keyGIF //process.env.keyGIF
 	let [query, setQuery] = useState(`find me`)
 	let url = `https://api.giphy.com/v1/gifs/translate?api_key=${key}&s=${query}`
@@ -23,10 +32,7 @@ export default function Profile(){
 	let [latest, setLatest] = useState("")
 	//let [genres, setGenres] = useState({})
 	let [favGenre, setFavGenre] = useState("")
-	let [favArtist, setFavArtist] = useState("")
-
-	let [userCookie, setUser] = useCookies(["user"])
-
+	let [favArtist, setFavArtist] = useState("")	
 
 	useEffect(() => {	
 		document.title = `Profile`