problemi/client/components/Header.tsx

import { Link } from 'preact-router/match'

import { isAdministrator } from '../../shared/model'
import { prependBaseUrl } from '../../shared/utils'

import { useCurrentUser } from '../hooks/useCurrentUser'

export const Header = ({}) => {
    const [user] = useCurrentUser()

    return (
        <header>
            <div class="logo">
                <a href={prependBaseUrl('/')}>PHC / Problemi</a>
            </div>
            <nav>
                <div class="nav-left">
                    <div class="nav-item">
                        <Link activeClassName="active" href={prependBaseUrl('/scores')}>
                            Classifica
                        </Link>
                    </div>
                </div>
                <div class="nav-right">
                    {user ? (
                        <>
                            {isAdministrator(user.role) && (
                                <div class="nav-item">
                                    <Link activeClassName="active" href={prependBaseUrl('/admin')}>
                                        Pannello Admin
                                    </Link>
                                </div>
                            )}
                            <div class="nav-item">
                                <Link activeClassName="active" href={prependBaseUrl('/profile')}>
                                    @{user.id}
                                </Link>
                            </div>
                        </>
                    ) : (
                        <div class="nav-item">
                            <Link activeClassName="active" href={prependBaseUrl('/login')}>
                                Login
                            </Link>
                        </div>
                    )}
                </div>
            </nav>
        </header>
    )
}