import React, { useContext, useState } from 'react'; import { Link, useMatch, useResolvedPath } from 'react-router-dom'; import styles from './Header.module.css'; import { AuthContext } from '../../context/Auth'; import { firebaseApp } from '../../firebase/init'; function NavLink({ children, to, ...props }) { let resolved = useResolvedPath(to); let match = useMatch({ path: resolved.pathname, end: true }); return ( <div> <Link className={match ? styles.activeLink : styles.link} to={to} {...props} > {children} </Link> </div> ); } export const Header = () => { const { currentUser } = useContext(AuthContext); const [isDropdown, setIsDropdown] = useState(false); function toggleDropdown() { setIsDropdown(!isDropdown); } async function handleLogout() { await firebaseApp.auth().signOut(); setIsDropdown(false); } return ( <header className={styles.header}> <nav className={styles.nav}> <div className={styles.brand}> <Link to="/">Pro Organiser</Link> </div> <ul className={styles.menu}> {currentUser ? ( <> <li> <NavLink to="/"> Home </NavLink> </li> <li> <NavLink to="/createboard">Create a board</NavLink> </li> <li className={styles.dropdown} onClick={toggleDropdown}> {currentUser.email} </li> </> ) : ( <> <li> <NavLink to="/login">Login</NavLink> </li> <li> <NavLink to="/signup">Sign Up</NavLink> </li> </> )} </ul> {isDropdown && ( <div className={styles.dropdownMenu}> <div className={styles.dropdownItem} onClick={handleLogout}> Logout </div> </div> )} </nav> </header> ); };