mail-proxy/client/src/components/Header.jsx

import React, { useState, useEffect } from "react";
import { notification } from "antd";
import Navbar from "react-bootstrap/Navbar";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";

import UserService from "../service/UserService";

export default function Head() {
    const [username, setUsername] = useState("");
    const token = UserService.getToken();

    useEffect(() => {
        if (token) {
            UserService.getUser().then((user) => setUsername(user.username));
        }
    }, []);

    const onLogout = () => {
        notification.error({
            message: "Not yet implemented",
            description: "To log out, please clear the cookies.",
        });
    };

    return (
        <Navbar bg="light" expand="md">
            <Container>
                <Navbar.Brand href="/">shape.camp</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href={`/users/${username}/shapes`}>
                            My Shapes
                        </Nav.Link>
                    </Nav>
                    <Nav>
                        {token ? (
                            <>
                                <Nav.Link href={`/users/${username}`}>
                                    {username}
                                </Nav.Link>
                                <Nav.Link onClick={onLogout}>Log Out</Nav.Link>
                            </>
                        ) : (
                            <>
                                <Nav.Link href="/login">Login</Nav.Link>
                                <Nav.Link href="/register">Register</Nav.Link>
                            </>
                        )}
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}