Updated Navbar

Check to see if user is Authenticated, which shows a different display of the Navbar
UoaWDCC · Jul 24, 2024 · fbf2cb4 · fbf2cb4
1 parent 78c7f59
commit fbf2cb4
Showing 1 changed file with 32 additions and 5 deletions.
diff --git a/frontend/src/ui/NavBar.tsx b/frontend/src/ui/NavBar.tsx
@@ -3,14 +3,26 @@
 import Link from 'next/link'
 import styles from './Navbar.module.css'
 import { usePathname } from 'next/navigation';
+import { useState } from 'react';
 
 export default function NavBar() {
     const pathname = usePathname();
+    const [isAuthentication, setIsAuthentication] = useState(true);
     console.log(pathname)
 
+    const handleLogin = () => {
+        setIsAuthentication(true)
+    }
+
+        const handleLogout = () => {
+        setIsAuthentication(false)
+    }
+
     return (
         <nav className={styles.nav}>
             <ul>
+
+
                 <li className={styles.navitem}>
                     <Link className={`${styles.navlink} ${pathname === "/home" ? styles.currentpage : ""}`} href="/home">
                         Home
@@ -26,11 +38,26 @@ export default function NavBar() {
                         Events
                     </Link>
                 </li>
-                <li className={styles.navitem}>
-                    <Link className={`${styles.navlink} ${pathname === "/home/login" ? styles.currentpage : ""}`} href="/home/login">
-                        Register/Log In
-                    </Link>
-                </li>
+                {isAuthentication ? (
+                    <>
+                        <li className={styles.navitem}>
+                            <Link className={`${styles.navlink} ${pathname === "/profile" ? styles.currentpage : ""}`} href="/profile">
+                                Profile
+                            </Link>
+                        </li>
+                        <li className={styles.navitem}>
+                            <button className={styles.navlink} onClick={handleLogout}>
+                                Logout
+                            </button>
+                        </li>
+                    </>
+                ) : (
+                    <li className={styles.navitem}>
+                        <Link className={`${styles.navlink} ${pathname === "/home/login" ? styles.currentpage : ""}`} href="/home/login">
+                            Register/Log In
+                        </Link>
+                    </li>
+                )}
             </ul>
         </nav>
     )